前端性能优化

总结

• 使用打包工具对代码进行打包压缩；
• 引入css时采用link标签，并放入头部，使其与文档一起加载，减少页面卡顿时间；
• 尽量减少dom结构的重排和重绘；
• 使用css雪碧图，减少网络请求；
• 对不同分辨率的屏幕采用不同分辨率的图片，防止图片过大导致加载缓慢；
• 使用懒加载，看不到的内容等需要时再进行加载；
• 能用css解决的问题不要用js解决，如动画、溢出省略号等；
• 编码时采用性能高的书写方式，如：
  • 将合并样式分开来书写，效率更高；
  • 重复的样式可以合并；
  • 减少优先级低的css选择器；
  • 需要渲染动画时强制打开GPU加速：transform: translate3d(0, 0, 0);
  • 写循环逻辑时尽量降低时间复杂度，尽量减少使用循环嵌套和递归；
• 使用缓存技术；
• CDN加速技术；

以下为性能优化的详细说明：

一、css方面

1. 加载性能

1. css压缩：使用webpack等工具打包压缩，减少体积。
2. css单一样式：在需要下边距和左边距的时候，很多时候选择：margin:top 0 bottom 0,但是margin-bottom:bottom;margin-left:left;执行效率更高。
3. 减少@import，而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

2. 选择器性能

1. 关键选择器：选择器的最后面的部分为关键选择器。css选择器是从右向左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等。
2. 如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则。
3. 避免使用通配符规则，如果*{}，计算次数惊人，只对需要用到的元素进行选择。
4. 尽量少的使用标签选择器，而使用class。
5. 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

3. 渲染性能

1. 慎重使用高性能属性：浮动，定位。
2. 尽量减少页面的重排和重绘。
3. 去除控规则，{}。空规则的产生的原因一般来说是为了预留样式。去除这些空规则则无疑能减少css文档体积。
4. 属性值为0时，不加单位。
5. 属性值为浮动小数0.***，可以省略小数点之前的0。
6. 标准化各种浏览器前缀，带浏览器前缀的在前。标准属性在后。
7. 选择器优先嵌套，尽量避免层级过深。
8. css雪碧图：同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身不变大，使用时，优劣考虑清楚使用。
9. 正确使用display的属性，由于display的作用，某一些样式组合会无效，徒增样式体积的同时也影响性能。

4. 可维护性和健壮性

1. 将具有相同内容的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
2. 样式和内容分离，将css代码定义到外部css中。

参考
https://www.yuque.com/cuggz/interview/evfmq3