浏览器渲染网页的每个步骤机制是什么-创新互联

小编给大家分享一下浏览器渲染网页的每个步骤机制是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联公司是一家专注于做网站、成都网站制作和成都服务器托管的网络公司，有着丰富的建站经验和案例。

我的想法：如果我要构建快速可靠的网站，需要真正了解浏览器渲染网页的每个步骤机制，这样就可以在开发过程中对每个步骤进行优化。 这篇文章是我在较高水平上对端到端过程的学习总结。

好了，废话不多说，我们开始吧。这个过程可以分为以下几个主要阶段：

1、开始解析HTML

2、获取外部资源

3、解析 CSS 并构建CSSOM

4、执行 JavaScript

5、合并 DOM 和 CSSOM 以构造渲染树

6、计算布局和绘制

1.开始解析HTML

当浏览器通过网络接收页面的HTML数据时，它会立即设置解析器将HTML转换为文档对象模型(DOM)。

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

解析过程的第一步是将HTML分解并表示为开始标记、结束标记及其内容标记，然后它可以构造DOM。

2. 获取外部资源

当解析器遇到外部资源（如CSS或JavaScript文件）时，解析器将提取这些文件。 解析器在加载CSS文件时继续运行，此时会阻止页面渲染，直到资源加载解析完（稍后会详细介绍）。

JavaScript 文件略有不同-默认情况下，解析器会在加载 JS 文件然后进行解析同时会阻止对HTML的解析。 可以将两个属性添加到脚本标签中以减轻这种情况：defer 和async。 两者都允许解析器在后台加载JavaScript 文件的同时继续运行，但是它们的执行方式不同。 关于这一点后面还会再讲一点，但总的来说：

defer表示文件的执行将被延迟，直到文档的解析完成为止。 如果多个文件具有defer属性，则将按照页面放置的顺序依次执行。