CSS渲染

[mbaxszy7]

CSS In Depth

布局

• 在布局阶段中，浏览器需要计算每个元素将在屏幕上占多大空间。因为文档流的工作方式，所以一个元素的大小和位置可以影响页面上无数其他元素的大小和位置。这个阶段会解决这个问题。
• 任何时候改变一个元素的宽度或高度，或者调整位置属性（比如 top 或者 left），元素的布局都会重新计算。如果使用 JavaScript 在 DOM 中插入或者移除元素，也会重新计算布局。一旦布局发生改变，浏览器就必须重排（reflow）页面，重新计算所有其他被移动或者缩放的元素的布局。

绘制

• 这个过程就是填充像素：描绘文本，着色图片、边框和阴影。这不会真正显示在屏幕上，而是在内存中绘制。页面各部分生成了很多的图层（layers）。
• 如果改变某个元素的背景颜色，就必须重新绘制它。但因为更改背景颜色不会影响到页面上 任何元素的位置和大小，所以这种变化不需要重新计算布局。改变背景颜色比改变元素大小需要 的计算操作要少。
• 某些条件下，页面元素会被提取到自己的图层。这时候，它会从页面的其他图层中独立出来单独绘制。浏览器把这个图层发送到计算机的图形处理器（graphics processing unit，GPU）进行绘制，而不是像主图层那样使用主 CPU 绘制。这样安排是有好处的，因为 GPU 经过了充分的优化，比较适合做这类计算。
• 这就是我们经常提到的硬件加速（hardware acceleration），因为需要依赖于计算机上的某些 硬件来推进渲染速度。多个图层就意味着需要消耗更多的内存，但好处是可以加快渲染。

合成

• 在合成（composite）阶段，浏览器收集所有绘制完成的图层，并把它们提取为最终显示在屏幕上的图像。合成过程需要按照特定顺序进行，以确保图层出现重叠时，正确的图层显示在其他 图层之上
• opacity 和 transform 这两个属性如果发生改变，需要的渲染时间就会非常少。当我们修 改元素的这两个属性之一时，浏览器就会把元素提升到其自己的绘制图层并使用 GPU 加速。因 为元素存在于自己的图层，所以整个图像变化过程中主图层将不会发生变化，也无须重复的重绘
• 如果只是对页面做一次性修改，那么通常不会感觉出这种优化可以带来明显的差异。但如果 修改的是动画的一部分，屏幕需要在一秒内发生多达几十次的更新，这种情况下渲染速度就很重 要了。大部分的屏幕每秒钟会刷新 60 次。理想情况下，动画中每次变化所需的重新计算也要至 少这么快，才能在屏幕上生成最流畅的运动轨迹。浏览器在每次重新计算的时候需要做的事情越多，越难达到这种速度

使用 will-change 控制绘制图层
will-change 的属性对渲染图层添加控制。这个属性可以提前告知浏览器，元素的特定属性将改变。这通常意味着元素将被提升到自己的绘制图层。例如，设置了 will-change: transform 就表示我们将要改变元素的 transform属性。
除非遇到性能问题，否则不要盲目添加该属性到页面，因为它会占用很多的系统资源

只有 tranfrorm 3D 变换会提升元素到自己的图层，现在已经不是这样了，最新的浏览器对 2D 变换也可以使用 GPU 加速