这个悲伤的故事就是本文的引子,真真切切的体会到了 css 对用户体验的影响非常明显,稍有不慎就是一个大坑。下面,我们就来谈谈 css 性能优化的问题。
加载性能
减少文件体积,压缩代码
减少阻塞加载,不要用 import
提高并发(这个不甚理解)
选择器性能
对整体性能的影响可以忽略不计了,但是选择器的考究更多是为了规范化和可维护性、健壮性。具体怎么实施可以参考 github 的这个分享:github's css performance by jon rohan
渲染性能
渲染性能是 css 优化最重要的关注对象。我们先来了解一下浏览器的渲染机制。
浏览器的渲染机制
浏览器渲染展示网页的过程,大致分为以下几个步骤:
1.解析html(html parser)
2.构建dom树(dom tree)
3.渲染树构建(render tree)
4.绘制渲染树(painting)
慎重选择高消耗的样式
什么 css 属性是高消耗的?就是那些绘制前需要浏览器进行大量计算的属性。
box-shadows
border-radius
transparency
transforms
css filters(性能杀手)
避免过分重排(reflow)
简单解释一下 reflow:当元素改变的时候,将会影响文档内容或结构,或元素位置,此过程称为 reflow。
怎么减少 reflow
1.不要一条一条地修改 dom 的样式,预先定义好 class,然后修改 dom 的 classname
2.把 dom 离线后修改,比如:先把 dom 给 display:none (有一次 reflow),然后你修改100次,然后再把它显示出来
3.不要把 dom 结点的属性值放在一个循环里当成循环里的变量
4.尽可能不要修改影响范围比较大的 dom
5.为动画的元素使用绝对定位 absolute / fixed
6.不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局
避免过分重绘(repaints)
当元素改变的时候,将不会影响元素在页面当中的位置(比如 background-color, border-color, visibility),浏览器仅仅会应用新的样式重绘此元素,此过程称为 repaint。
优化动画
css3 动画是优化的重中之重。除了做到上面两点,减少 reflow 和 repaints 之外,还需要注意以下方面。
启用 gpu 硬件加速
gpu(graphics processing unit) 是图像处理器。gpu 硬件加速是指应用 gpu 的图形性能对浏览器中的一些图形操作交给 gpu 来完成,因为 gpu 是专门为处理图形而设计,所以它在速度和能耗上更有效率。
gpu 加速可以不仅应用于3d,而且也可以应用于2d。这里, gpu 加速通常包括以下几个部分:canvas2d,布局合成(layout compositing), css3转换(transitions),css3 3d变换(transforms),webgl和视频(video)。
/* * 根据上面的结论 * 将 2d transform 换成 3d * 就可以强制开启 gpu 加速 * 提高动画性能 */div { transform: translate(10px, 10px);}div { transform: translate3d(10px, 10px, 0);}
需要注意的是,开启硬件加速相应的也会有额外的开销,参见这篇文章 css 硬件加速的好与坏