浏览器渲染过程

学习路径

引用
https://www.bilibili.com/video/BV18f4y1H7Zu/?spm_id_from=333.788.recommend_more_video.-1

一、浏览器渲染过程

1.先请求服务器，得到 HTML 文件，构建成DOM

浏览器先得到的是 显示字节 的 HTML 文件，字节文件转换成字符文件，把字符文件转换为 token （标签），token 再转换为 节点对象，节点对象有自己的属性和方法，最后把节点对象结合在一起，形成 DOM 文本对象模型，DOM是浏览器自己的语言。

2. 在构建DOM时，遇到link标签，接收css，构建成cssom

DOM一行一行代码进行构建，这时候会遇到link标签，会进行css接收，接收到的是css 字节文件，进行一步步转换，由 字节》字符》token 》css节点 ，
css节点会结合成 css对象模型，也就是cssom。

3.渲染树

页面在渲染的时候，由DOM和cssom 结合匹配对应的标签样式，形成渲染树，不需要渲染的标签不会挂在渲染树上，也就不会渲染出来，例如：meta、 link、 display：none。

渲染树的任务就是匹配 DOM 和CSSOM节点

4.布局

布局 就是获取渲染树的 结构、节点位置、大小，布局是依据盒子模型来进行的。 浏览器在布局以后，就可以进行绘制，把渲染树以像素的样式呈现出来。

5.实际渲染，小心阻塞HTML解析

实际渲染中，CSSOM是一个重要的阻塞因素，构建DOM也会阻塞，解析JS也会阻塞。JS没有额外的设置，要等到CSSOM构建完成后。

6.DOM 和 CSSOM 不同

DOM 可以部分解析，CSSOM不可以部分解析。