浏览器渲染原理与过程

浏览器如何渲染网页

要了解浏览器渲染页面的过程，首先得知道一个名词——关键渲染路径。关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源，然后解析、构建树、渲染布局、绘制，最后呈现给客户能看到的界面这整个过程。
用户看到页面实际上可以分为两个阶段：页面内容加载完成和页面资源加载完成，分别对应于DOMContentLoaded和Load。

• DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片等
• load事件触发时，页面上所有的DOM，样式表，脚本，图片都已加载完成

浏览器渲染的过程主要包括以下五步：

1. 浏览器将获取的HTML文档解析成DOM树。
2. 处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。
3. 将DOM和CSSOM合并为渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象。
4. 渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。
5. 将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。

需要注意的是，以上五个步骤并不一定一次性顺序完成，比如DOM或CSSOM被修改时，亦或是哪个过程会重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。而在实际情况中，JavaScript和CSS的某些操作往往会多次修改DOM或者CSSOM。

webkit渲染引擎流程

浏览器渲染网页的具体流程

构建DOM树

当浏览器接收到服务器响应来的HTML文档后，会遍历文档节点，生成DOM树。
需要注意以下几点：

• DOM树在构建的过程中可能会被CSS和JS的加载而执行阻塞
• display:none的元素也会在DOM树中
• 注释也会在DOM树中
• script标签会在DOM树中

无论是DOM还是CSSOM，都是要经过Bytes→characters→tokens→nodes→objectmodel这个过程。

当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

构建CSSOM规则树

浏览器解析CSS文件并生成CSSOM，每个CSS文件都被分析成一个StyleSheet对象，每个对象都包含CSS规则。CSS规则对象包含对应于CSS语法的选择器和声明对象以及其他对象。
在这个过程需要注意的是：

• CSS解析可以与DOM解析同时进行。
• CSS解析与script的执行互斥 。
• 在Webkit内核中进行了script执行优化，只有在JS访问CSS时才会发生互斥。

构建渲染树（Render Tree）

通过DOM树和CSS规则树，浏览器就可以通过它两构建渲染树了。浏览器会先从DOM树的根节点开始遍历每个可见节点，然后对每个可见节点找到适配的CSS样式规则并应用。
有以下几点需要注意：

• Render Tree和DOM Tree不完全对应
• display: none的元素不在Render Tree中
• visibility: hidden的元素在Render Tree中

渲染树生成后，还是没有办法渲染到屏幕上，渲染到屏幕需要得到各个节点的位置信息，这就需要布局（Layout）的处理了。

渲染树布局(layout of the render tree)

布局阶段会从渲染树的根节点开始遍历，由于渲染树的每个节点都是一个Render Object对象，包含宽高，位置，背景色等样式信息。所以浏览器就可以通过这些样式信息来确定每个节点对象在页面上的确切大小和位置，布局阶段的输出就是我们常说的盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。需要注意的是：

• float元素，absoulte元素，fixed元素会发生位置偏移。
• 我们常说的脱离文档流，其实就是脱离Render Tree。

渲染树绘制（Painting the render tree）

在绘制阶段，浏览器会遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。

浏览器渲染网页的那些事儿

浏览器主要组件结构

浏览器主要组件

渲染引擎主要有两个：webkit和Gecko
Firefox使用Geoko，Mozilla自主研发的渲染引擎。Safari和Chrome都使用webkit。Webkit是一款开源渲染引擎，它本来是为linux平台研发的，后来由Apple移植到Mac及Windows上。
虽然主流浏览器渲染过程叫法有区别，但是主要流程还是相同的。

渲染阻塞

JS可以操作DOM来修改DOM结构，可以操作CSSOM来修改节点样式，这就导致了浏览器在遇到