[知识沉淀] 从输入URL到页面展示，这中间发生了什么？ about blog HOT 4 OPEN

重排

1. 更新了元素的几何属性（如宽、高、边距）；
2. 触发重新布局，解析之后的一系列子阶段；
3. 更新完成的渲染流水线，开销最大。

重绘

1. 更新元素的绘制属性（元素的颜色、背景色、边框等）；
2. 布局阶段不会执行（无几何位置变换），直接进入绘制阶段。

合成

1. 直接进入合成阶段（例如CSS 的 transform 动画）；
2. 直接执行合成阶段，开销最小。

from blog.

以上便是一个浏览器从输入url 到页面展示的过程，相关的问题延伸则后续单独开题补充

补充参考资料
从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！

当我们在浏览器中输入一个URL后，发生了什么？

from blog.

占位，顺便补充如何优化 重排 重绘

from blog.

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

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

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

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

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

备注: will-change 属性可以告知浏览器即将发生的变化，方便浏览器收集信息进行优化

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

from blog.