课程地址：【前端大厂面试必刷：前后端必学的网络安全浏览器工作原理：从入门到精通全套【附带所有源码】】 https://www.bilibili.com/video/BV1UL41157hP/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155
目录
2 浏览器渲染流程
从一个简单的html页面介绍浏览器的渲染流程。
DOM解析->CSS解析->样式计算->布局树->图层树->绘制->合并图层。
浏览器渲染流程具体包括以下7步。
1 使用HTML解析器将HTML页面转换成浏览器能够理解的DOM树
2 将css解析成浏览器能够识别的css树
3 样式计算
4 DOM树+CSS树->布局树
5 根据布局树生成图层树
6 绘制图层
7 组合图层，生成最终的页面
哪几种节点能被作为单独图层
1 css 3D转换
2 position:fixed
3 video
4 canvas
5 css3动画节点
f12
2.1 渲染流程1
编写好HTML、CSS、JavaScript文件后，经过浏览器会显示出漂亮的页面，他是如何转化的？
这个转换过程对我们来说是一个黑盒，这个黑盒其实就是渲染模块，也就是我们要讨论的主题。
由于渲染机制过于复杂，所以渲染模块在执行过程中被划分为很多子阶段，输入的HTML经过这些子阶段，最后输出像素。我们将这样的处理流程叫做渲染流水线。
2.1.1 ① 构建DOM树
首先第一步是解析HTML。
因为浏览器无法直接理解和使用HTML，所以需要将HTML转化为浏览器能够理解的结构——DOM树。
1 使用HTML解析器将HTML页面转换成浏览器能够理解的DOM树。
DOM树的构建过程
示例
此时DOM树已经被构建。
此时的DOM树是存在内存中的，便于JavaScript对DOM进行增删改查操作。
此时页面还没有渲染。
2.1.2 ② 构建CSS树
2 将css解析成浏览器能够识别的css树
（实际渲染页面过程没找到这步）
和HTML文件一样，浏览器也是无法直接理解这些纯文本的css样式。所以当渲染引擎接收到css文本时，会执行一个转换操作，将css文本转换为浏览器可以理解的结构——styleSheets。
最终呈现的也是一种树状结构，右下图所示。
css树的特点：每个节点和DOM树的节点都是一一对应的。
2.1.3 ③ 样式计算
样式计算。
根据CSS树每个DOM的位置进行计算，将其安排到正确的位置。
计算出DOM树每一个节点的具体样式。
（此时浏览器还未渲染。）
2.1.4 ④ 布局阶段
DOM树+CSS树，创建出一个布局树。
布局树的特点：只包含页面能够显示的内容，页面不显示的内容不包含在其中。
此时页面还未正式渲染完毕。只是将位置关系确定下来，但是还未添加具体样式。
DOM树种所有不可见的节点都没有包含到布局树中。
实际页面渲染的布局阶段。
（此时页面还未正式渲染完毕。）
2.2 渲染流程2
2.2.1 ⑤ 更新图层树
有了布局树后，每个元素的具体位置信息都计算出来了，接下来是不是就要着手绘制页面了？
不是，因为页面有很多复杂的效果，如一些复杂的3D转换，页面滚动，或者使用z-index。
为了方便实现上述效果，渲染引擎还要为特定的节点生成专门的图层，并生成一棵对应的图层树（LayerTree）。
这和PS的图层类似，正式这些图层叠加在一起才最终构成了页面图像。
示例
可以看出，百度这个页面由许多图层组成。
因为html页面由很多div组成。
比如一个photoshop实际上由许多图层组成。
问题：哪些节点在html页面中会被称之为图层？
2.2.1.0 哪些节点会被作为单独图层
在html页面中，不是所有的节点都被作为一个单独图层，一定是具备某些特殊属性。
如果没有做单独图层？看父级元素有没有做一个单独的图层。父级若没有，再往上找。
- ① 执行3D转换的元素（下方有示例）
- 样式中有 transform: rotateX(30deg) 等设置
- ② 设置 position:fixed 的元素
- 样式中有 position:fixed 等设置
- ③ video节点
- 视频元素可以单独作为一个图层
- ④ canvas节点
- ⑤ css3动画的节点
- 注意：动画执行完毕后就不是单独的图层了。
示例
① 3D转换的元素，可以发现存在两个图层。
② 设置位置的元素。
现在页面有3个图层。
（其他元素就不列举示例了，都是在原来基础上多加了个图层。）
2.2.2 ⑥ 绘制图层
绘制，就是给DOM加一些样式。
按照图层进行分别绘制图层。每个绘制代表绘制一个图层。
绘制，是在GPU里去绘制的。GPU负责UI绘制。
具体可以去看2、渲染流程-02 · 语雀
2.2.3 ⑦ 组合图层
图层绘制完毕后，将所有的图层组合起来，生成最终的页面。
2.3 渲染流水线总结
下图比较直观，渲染流水线的处理都是在渲染进程完成的。
浏览器主进程只负责最终的页面显示。
GPU进程负责绘制图层。
2.4 相关概念
以上7个步骤组成的流程就是渲染流水线。
与渲染流水线有关的3个概念——重排、重绘 和 合成。理解这3个概念对后续Web性能优化有较大帮助。
2.4.1 重排-更新元素的几何属性
使用js或者css更新元素的几何属性（height、width等），会触发浏览器的重新布局，这个过程叫做重排，步骤④会重复执行。
2.4.2 重绘-更新元素的绘制属性
使用js更改元素的背景颜色，会触发浏览器的重新绘制，这个过程叫重绘。
2.4.3 合成
重排和重绘都比较消耗性能。因为都是在浏览器主线程中发生的。因此页面里尽量不要去做重排或重绘操作，可以去执行 合成 动作。
合成 是交给GPU线程执行，效率高，不会占用主线程资源。比如css的tranform实现动画效果。
2.5 进阶
浏览器接收到内容后如何解析的？
文档语言太混乱了，跳过吧先。
2.6 总结
performances里的事件日志里也可以看到浏览器的渲染流程。
浏览器每次可以接收多少数据？
64kb。可验证。
一张超过64kb的照片，比如460kb。要分为8次才能完全接受这张图片，每次接受65536 bytes（即64kb）。
同理，如果是1g的视频，也是分段接收的。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
