浏览器渲染页面的流程

DOM

浏览器渲染界面的过程就像盖房子
先请求服务器得到HTML文件，HTML相当于网页框架结构，但是一开始拿到的是字节构成的HTML文件，于是先把字节转换为字符（人能看懂，也就是HTML），字符再转化为机器能看懂的语言Token：可以简单理解为符号标签，比如遇到起始就转换为起始标签，遇到结尾转换为结束标签，这样字符被Token化，然后进行升华，把Token转换为节点对象，对象可以进行编程操作，因为对象有自己的属性方法，相当于把Token盘活了，然后把这些节点对象连在一起，形成文本对象模型，也就是DOM，DOM就是浏览器自己的语言，每个节点对象相连，形成父子关系，这样后面对于某个节点对象进行操作对浏览器来说就很友好了
上面就是盖房子的结构
1709904489867.png

CSSOM

你在制作房子框架的时候也会去给你的房子做“装修”，比如给房子上色
一般会把CSS样式作为外链加入到link标签里面
<link rel = "stylesheet" type="text/css" href="index.css">
CSS相当于网页的“装饰”，浏览器在构建DOM的时候，就会遇到link标签，然后向服务器发送请求，拿到CSS文件，后面的流程和HTML文件很像，但是节点会结合为CSS对象模型，也就是CSSOM。
1709904497347.png
这样我们房子的模型就完成了

渲染树

DOM和CSSOM都是独立的对象模型，一个网页的呈现离不开两者，DOM和CSSOM的爱情结晶就是渲染树了，但不是简单地结合，因为渲染树的节点就是页面能够呈现的内容，也就是一些HTML标签和某些样式是不会被呈现出来，比如<link> <meta>标签就不会当作内容呈现，设置了display:none的样式也不会呈现出来（都用黄色在图中标记出来了），渲染树的任务就是匹配DOM和CSSOM的节点，并且捕捉可见内容

布局

现在我们房子框架和样式有了，但是要对房子布局，需要多少块砖头，需要多少吨水泥。
在渲染树构建完成后，页面也是不能被马上渲染的，还需要布局，布局的意思就是获取渲染树的结构，节点位置和大小，布局是依据盒子模型进行的，每个元素都用一个盒子来表示，然后这些盒子在页面上进行排列和嵌套。
1709904515382.png

绘制

我们布局结束后，我们来开始建房子吧！

浏览器在布局以后其实就可以安排页面的绘制了，把渲染树以像素的形式绘制在页面，这样我们的页面就呈现出来了！
1709904520710.png

渲染HTML+CSS+JS

上面是基础的渲染知识，这里我们深入了解一下，建议你有一定的前端知识基础
这里我们用图片来解释，难以理解的地方在后面解释：
1709904525187.png
在解析HTML文件中遇到<link> 和 <script>标签就去请求CSS和JS文件，在请求的同时继续解析，服务器和问题陆续返回CSS和JS文件，顺序看具体情况，这里有个重点：如果先返回并解析完成JS文件也是会发生阻塞，我们不能先执行JS文件，必须等到CSSOM构建完成了才能执行JS文件（即使是在**script**标签中写JS代码），因为前面说过渲染树是需要DOM和CSSOM构建完成了以后才能构建，而且JS是可以操控CSS样式的，所以就是解析CSS文件并且构建CSSOM。
1709904530527.png
CSSOM构建是渲染中一个重要的阻塞因素，DOM其实也会，但是DOM可以部分解析，CSSOM不可以

还有一点就是JS会阻塞HTML的解析（上面的绿色就到JS解析停止了），在JS执行完之后下面的流程就正常了，也就是形成渲染树（构建DOM后），进行布局，最后绘制
1709904535390.png