性能优化：浏览器渲染

个人博客原文链接
在聊浏览器渲染之前，我们先明确一个概念： 事实上，我们看到的页面并不是直观所见的一层图页，而是由许多DOM元素渲染层(Layers)组成的，如下图。

页面的渲染过程

一个的页面的渲染过程由如下几步构成：
* 构建渲染树(Render Tree): 根据DOM和CSSOM树渲染，不可见元素不被会渲染

* 布局(layout): CPU根据渲染树布局计算元素的具体位置和大小，转换成绝对像素，并且根据样式，分割成多个独立的渲染层(Layers)，将每一层对应到位图中
* 绘制(Paint): GPU根据每个渲染层(Layers)的位图绘制每个点，即像素填充,并且将所以渲染层缓存，如果下次页面变动但是渲染层没变就不会触发重绘。
* 层级合成(Compositing): 顾名思义，即处理多层渲染层之间的关系，将其合成为一个完整的页面。

重绘和重排

重绘（repaint）:
* 元素视觉表现属性被改变即触发重绘，如改变visibility，color等，不会影响到dom结构

reflow（重排）:
* 与repaint区别就是：所有影响dom的元素布局的事件都会触发重排。同时也会触发repaint。
* 这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

reflow常见情况：
* 增删改DOM节点
* 移动DOM的位置或是动画显示(所以尽量用canvas来做动画)
* 修改width、display等CSS样式
* resize窗口或是滚动的时候
* 修改网页默认字体(不建议)
* display:none会触发reflow和repaint，而visibility:hidden只会产生repaint

显而易见，要提高页面性能，首要目标就是减少重绘重排，具体方法包括当不限于以下几种：

• 压缩DOM深度，以免内层元素改变而导致多个外层都改变。
• 对于没用的元素，尽量设置为display:none，减轻绘制压力。
• 在对DOM进行大量元素操作时，我们可以使用利用DocumentFragment对象进行操作，最后再一次性装载进DOM结构中。
• 指定img的大小：由于img是内联元素，所以在加载后会改变宽高，严重的会导致整个页面重排，所以最好在渲染前就设置好其宽高，或者让其脱离文档流。

DOM渲染层(Layers)与GPU硬件加速

知道了浏览器页面的渲染合成过程后，我们不难得出一个结论：

如果我们把会发生大量重绘重排的元素提取出来，单独触发一个渲染层(Layer)，就不会把其他元素一起带着重绘，这会大大提高页面性能。

那么如何触发渲染层，让GPU来加速绘制呢？最简单的方法有以下三种：

will-change: transform;
will-change: opacity;
transform: translateZ(0);

PS：使用Layers来触发GPU加速(硬件加速)也会带来负面影响，如电量损失过快、占用内存和GPU等。所以在使用中要注意不能滥用，在常触发重绘和重排的元素上使用即可。