浏览器渲染HTML页面的简单过程

绘制的主要过程

1. DOM构造
2. 布局
3. 绘制页面

DOM树构造

1.浏览器首先将收到的HTML代码通过HTML解析器解析创建为一个DOM树这样的对象模型决定了节点之间都有一定的关连。顺着这棵树我们可以做出许多操作。

2.通过CSS解析器构建样式表规则，然后将这些规则分别放在对应的DOM树节点上，得到一颗带有样式属性的DOM树

布局

1.浏览器读取DOM树的文档节点，按照从上到下从左到右的顺序进行，并按此按顺序将其放置到一条虚拟的传送带上，传送带上的盒子就是节点，传送带就是文档流，如果我们读取到的节点属于另一个节点下的子节点，那么就应该按照同样的顺序规则将其放入到该节点盒子的内部。如果该子节点下还有子节点，就继续上面的规则，理论上可以有无限层的嵌套。

2.开始计算节点的坐标和大小等css属性，作为盒子的包装声明，然后将盒子在浏览器中一次摆放

绘制页面

在布局完成之后我们在浏览器中并不能看到任何的内容，浏览器只是计算出每个节点应该被放到页面中的那么位置上，但是并没有可视化，因此最后一步就是将所有的内容绘制出来，完成整个页面的渲染

浏览器渲染原理与过程