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

浏览器页面渲染流程

浏览器从HTTP服务器获取html文档，到呈现页面给用户，会经过以下几个步骤：

1、解析文档构建DOM树

浏览器的解析内容可以分为三个部分：

• HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree）
• CSS：解析样式表，生成CSS规则树（CSS Rule Tree）
• JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与用户进行交互。

以上三类文件的执行顺序会根据其在文档中的位置及其标签属性的不同而有异同，具体在后文进行讨论。

2、构建渲染树

解析文档完成后，浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上，并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree（渲染树）。此处需要注意：

• Render Tree和DOM Tree的区别在于，类似Head或display：node之类的东西不会放在渲染树中；
• 将CSS Rule Tree匹配到DOM Tree需要解析CSS的选择器，为了提高该过程的性能，DOM树应该尽量小，CSS Selector应该尽量使用id和class，避免过度层叠。

3、布局与绘制渲染树

解析position, overflow, z-index等等属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制（repain）。注意：

• 渲染树的节点，在Gecko中称为frame，而在webkit中称为renderer；
• reflow和repaint是两个不同的概念，其区别会在后文进行探讨。

---

脚本和样式文件对页面渲染的影响

浏览器从服务器获取文档并从上到下进行解析，在脚本文件标签不包含defer和async属性的情况下，会按照如下规则执行文档内容：

1. 解析html文档，遇到HTML标签时，构建DOM树
2. 在构建DOM的过程中，如果遇到外联的样式声明或脚本声明，则暂停文档解析，创建新的网络连接，开始下载样式文件和脚本文件
3. 样式文件下载完成后，构建CSS Rule DOM，脚本文件下载完成后，解释并立即执行。
4. 构建DOM的同时，结合CSS规则树完成页面渲染。
5. 如果DOM树先于CSS规则树构建完成，则在CSS规则树构建完成后，页面会发生一次重绘，将新构建的CSS规则应用于渲染树。

脚本文件对文档解析的影响

在这个过程中，脚本文件的下载和执行是与文档解析同步进行的，脚本文件的下载和执行都会阻塞文档的解析，如果控制得不好，在用户体验上就会造成一定程度的影响。

举个例子，编写一个简单的html页面如下：

    
    
    


    body render!

head中加载的脚本文件内容为：

alert('i am the script');

在浏览器中运行时，会先弹出提示框，此时，body元素并没有进行渲染。

这里写图片描述

关闭弹出框以后，才完成对body的渲染：

这里写图片描述

脚本文件的defer和async属性

为了防止脚本加载使浏览器页面阻塞，妨碍用户体验。应该合理使用

defer1.js：

console.log('defer1');

defer2.js:

console.log('defer2')

控制台输出结果如下图，可以看出，对内联js脚本使用defer属性并不起作用。

这里写图片描述

async：异步下载脚本文件，下载完毕立即解释执行代码。 HTML5的新增属性。

• 只适用于外联脚本，这一点和defer一致
• 如果有多个声明async的脚本，其下载和执行都是异步的，不能确保彼此的先后顺序
• async会在load事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序

为了验证async属性的特性，编写页面如下：

async1.js:

console.log('async1.js')

async2.js:

console.log('async2.js')

输出结果为：

这里写图片描述

下面这张图清楚的阐述了