学习笔记：浏览器渲染优化——关键渲染路径

帧

但浏览器还需要对每帧进行处理，所以要在10ms内完成所有任务并及时渲染每帧。

渲染树（render tree）

只有实际上会显示在网页上的元素，才会进入渲染树

它和DOM树很像，只是少了一些东西。

例如没有了：head 任何脚本

如果有css段落设置成

display:none

，那么段落

P

也会从渲染树中移除。

如果添加了伪元素如

after

或

before

，就会被添加到渲染树里（即使没出现在DOM里）。

从单个请求一直在将像素填充到屏幕上的简单流程

浏览器创造的多的层面叫做图层，并且可以单独绘制这些图层

渲染

浏览器将需要检查所有其他元素并返回流网页，受影响区域将重新绘制：

1. 通过JS、CSS更改了外观或者改变了布局（元素的几何结构）

2. 仅更改绘制属性（JS、CSS），没更改布局

3. 没更改绘制或者布局，只需要合成（合成是指浏览器将页面的单个图层合并到一起），如下图：



CSS出发的工作：https://csstriggers.com/