浏览器是如何渲染一个页面的？

在浏览器中输入网址，获取到html文件流后，浏览器开始解析渲染页面。

首先了解一下两个概念。

DOM：Document Object Model，文档对象模型。用来描述了HTML文档中标签间的相互关联性。

CSSOM：CSS Object Model，CSS对象模型。用来描述CSS文档属性。

渲染页面呢，主要分为以下五大步骤

根据HTML解析出DOM树。

根据获取到的外部资源，CSS文件。生成CSS规则树。（外部资源也包括 JavaScript文件，下面介绍的不包括JS，包括JS的见下面的问题一）

结合DOM树和CSS规则树，生成渲染树

根据渲染树计算每一个节点的信息（布局）

开始repaint重绘，根据计算好的信息绘制页面

根据HTML解析DOM树

根据HTML的内容，将标签按照结构解析成为DOM树，DOM树解析的过程是一个深度优先遍历。会先构建当前节点的所有子节点，再构建下一个兄弟节点。

最常见的几种节点有：文档节点、元素节点、文本节点、属性节点、注释节点。

在读取HTML文档，构建DOM树的过程中，若遇到script标签，则DOM树的构建会暂停，直至脚本执行完毕。

根据CSS解析生成CSS规则树

解析CSS规则树时JS 执行将暂停，直至CSS规则树就绪。

浏览器在CSS规则树生成之前不会进行渲染。

结合DOM树和CSSOM规则树，生成渲染树

DOM树和CSS规则树全部准备好了以后，浏览器才会开始构建渲染树。

精简 CSS 可以加快CSS规则树的构建，从而加快页面相应速度。

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

根据渲染树计算每一个节点的信息

布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸

回流：在布局完成后，发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。某个元素的尺寸发生了变化，则需重新计算渲染树，重新渲染。

根据计算好的信息绘制页面

绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。

重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘。