浏览器渲染html的过程分为三大步骤

1.DOM构造

2.布局

3.绘制页面

DOCTYPES html5渲染模式 渲染html过程_DOCTYPES html5渲染模式

1.DOM构造

浏览器首先将收到的html代码通过html解析器解析构建为一棵DOM树,把css解析成CSSOM

DOCTYPES html5渲染模式 渲染html过程_javascript_02


将收到的css代码通过css解析器构建出样式表规则,将这些规则分别放入对应的DOM节点上得到一颗带有样式的DOM树,也就是把CSSOM和DOM结合产生render tree

DOCTYPES html5渲染模式 渲染html过程_javascript_03

2.布局

浏览器按从上到下从左到右的顺序读取DOM的文档节点,按顺序存放到一条虚拟的传送带上,传送带上的盒子就是节点,而这条流动的传送带就是文档流

DOCTYPES html5渲染模式 渲染html过程_前端_04


DOCTYPES html5渲染模式 渲染html过程_javascript_05

如果读取到的节点是属于另一个节点的子节点,那么放入传送带的时候就会按顺序放到该节点盒子的内部,如果子节点还有子节点在传送带上上的时候就会继续逃到子一级的盒子内部,根据他在DOM树上的结构可以嵌套的层级是没有限制的

DOCTYPES html5渲染模式 渲染html过程_javascript_06


文档流排完之后开始获取计算节点的坐标和大小等css属性,然后把盒子在仓库里一 一摆放这样就将节点布局到了页面上

DOCTYPES html5渲染模式 渲染html过程_javascript_07

绘制页面

布局完成后在页面上是看不到内容的,浏览器知识计算出了每一个节点的对象应该被放到页面的哪个位置上,但并没有可视化,因此最后一步就是将页面渲染出来,完成整个页面的渲染

DOCTYPES html5渲染模式 渲染html过程_DOCTYPES html5渲染模式_08

注意:布置文档流是从body开始的

如果页面上的元素很多,可以打个包,把部分元素放到一个黑盒中,这个黑盒可以是from或者div也可以是其他元素,布局的时候不需要管黑盒内部有什么。

DOCTYPES html5渲染模式 渲染html过程_前端_09