浏览器渲染页面的原理及流程

浏览器渲染页面的流程

1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。

2.构建渲染树（Render Tree）。构建渲染树，根据渲染树计算每个可见元素的布局，并输出到绘制流程，将像素渲染到屏幕上。

（渲染树（Render Tree）由DOM树、CSSOM树合并而成，但并不是必须等DOM树及CSSOM树加载完成后才开始合并构建渲染树。三者的构建并无先后条件，亦非完全独立，而是会有交叉，并行构建。因此会形成一边加载，一边解析，一边渲染的工作现象。）

3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。

浏览器渲染页面的原理

1、浏览器内核拿到内容后，渲染步骤大致可以分为以下几步：

2、解析HTML，构建DOM树

3、解析CSS，生成CSS规则树

4、合并DOM树和CSS规则，生成render树（DOM树和CSSOM树连接在一起形成render tree .‘渲染数’）

5、布局render树（Layout/reflow），负责各元素尺寸、位置的计算

6、绘制render树（paint），绘制页面像素信息

7、浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上