前端性能优化实战（一）

写在前面，说到性能优化，可以说是重中之重了，在日常开发中，性能优化可以说是随处可见，而性能优化的点也是有很多，完善的性能优化可以为用户的体验已指数被增长。那具体又哪些性能优化的点呢？接下来，就让我带大家走进性能优化的世界吧。

网站的性能优化

content ⽅⾯

• 减少 HTTP 请求：合并⽂件、 CSS 精灵、 inline Image

• 减少 DNS 查询： DNS 缓存、将资源分布到恰当数量的主机名

• 减少 DOM 元素数量

Server 方面

• 使⽤ CDN

• 配置 ETag

• 对组件使⽤ Gzip 压缩

Cookie 方面

• 减⼩ cookie ⼤⼩

CSS 方面

• 将样式表放到⻚⾯顶部

• 不使⽤ CSS 表达式

• 避免使⽤ @import 引⼊多个 css ⽂件，可以使⽤ CSS ⼯具将 CSS 合并为⼀个 CSS ⽂ 件，例如使⽤ Sass\Less 等

• css 压缩与合并、 Gzip 压缩

• 尽量⽤缩写、避免⽤滤镜、合理使⽤选择器

• 在⽹⻚中的应该使⽤偶数的字体

• 偶数字号相对更容易和 web 设计的其他部分构成⽐例关系

• 动画最小间隔为 16.7ms

• 多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最⼩间隔为 1/60*1000ms ＝ 16.7ms

Javascript 方面

• 将脚本放到⻚⾯底部

• 将 javascript 和 css 从外部引⼊

• 压缩 javascript 和 css

• 删除不需要的脚本

• 减少 DOM 访问

今天先总结到这里，我们下期再见。Bye！！！

End~~~