101.页面渲染性能优化

[neptoo]

页面渲染性能优化

页面是由多个DOM元素渲染层组成的，如下图：

一个页面在构建完render tree之后，是经历了这样的流程才最终呈现在我们面前的：

①浏览器会先获取DOM树并依据样式将其分割成多个独立的渲染层

②CPU将每个层绘制进绘图中

③将位图作为纹理上传至GPU（显卡）绘制

④GPU将所有的渲染层缓存（如果下次上传的渲染层没有发生变化，GPU就不需要对其进行重绘）并复合多个渲染层最终形成我们的图像

从上面的步骤我们可以知道，布局是由CPU处理的，而绘制则是由GPU完成的。

什么情况下会触发渲染层呢？

video元素、WebGL、Canvas、CSS3 3D、CSS滤镜、z-index大于某个相邻节点的元素都会触发新的Layer。

我们把容易触发重排重绘的元素单独触发渲染层，让它与那些“静态”元素隔离，让GPU分担更多的渲染工作，我们通常把这样的措施成为硬件加速，或者是GPU加速。

这项策略需要慎用，得着重考量以牺牲GPU占用率能否换来可期的性能优化，毕竟页面中存在太多的渲染层对与GPU而言也是一种不必要的压力，通常情况下，我们会对动画元素采取硬件加速。

重排与重绘

①重排（reflow）：渲染层内的元素布局发生修改，都会导致页面重新排列，比如窗口的尺寸发生变化、删除或添加DOM元素，修改了影响元素盒子大小的CSS属性（诸如：width、height、padding）。

②重绘（repaint）：绘制，即渲染上色，所有对元素的视觉表现属性的修改，都会引发重绘。

优化策略

1. CSS属性读写分离，不用JS去操作元素样式
2. 通过切换class或者style.csstext属性去批量操作元素样式
3. DOM元素"离线"更新（隐藏元素，在元素“消失”后进行相关操作）
4. 多使用伪元素或者box-shadow取代DOM，完成页面样式
5. 图片在渲染前指定大小

查看原文

网站性能优化实战——从12.67s到1.06s的故事