6张图让你搞懂浏览器渲染网页过程 _浏览器

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

开始解析html
获取外部资源
解析 css 并构建CSSOM
执行 JAVAScript
合并 DOM 和 CSSOM 以构造渲染树
计算布局和绘制

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

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

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

文章插图

2. 获取外部资源当解析器遇到外部资源（如CSS或JavaScript文件）时，解析器将提取这些文件。解析器在加载CSS文件时继续运行，此时会阻止页面渲染，直到资源加载解析完（稍后会详细介绍）。
JavaScript 文件略有不同-默认情况下，解析器会在加载 JS 文件然后进行解析同时会阻止对HTML的解析。可以将两个属性添加到脚本标签中以减轻这种情况：defer 和async 。两者都允许解析器在后台加载JavaScript 文件的同时继续运行，但是它们的执行方式不同。关于这一点后面还会再讲一点，但总的来说：
defer表示文件的执行将被延迟，直到文档的解析完成为止。如果多个文件具有defer属性，则将按照页面放置的顺序依次执行。
<script type="text/javascript" src=https://www.isolves.com/it/rj/jy/2020-11-26/"script.js" defer>async 意味着文件将在加载后立即执行，这可能是在解析过程中或在解析过程之后执行的，因此不能保证异步脚本的执行顺序。
<script type="text/javascript" src=https://www.isolves.com/it/rj/jy/2020-11-26/"script.js" async>预加载资源<link> 元素的 rel 属性的属性值preload能够让你在你的HTML页面中 <head>元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。
对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。
<link href=https://www.isolves.com/it/rj/jy/2020-11-26/"style.css" rel="preload" as="style" />

文章插图

3.解析CSS并构建CSSOM你可能很早就知道DOM ，但对**CSSOM（CSS对象模型）**可能听得少，反正我也没听过几次。

CSS 对象模型 (CSSOM) 是树形形式的所有CSS选择器和每个选择器的相关属性的映射，具有树的根节点，同级，后代，子级和其他关系。CSSOM 与文档对象模型(DOM) 非常相似。两者都是关键渲染路径的一部分，也是正确渲染一个网站必须采取的一系列步骤。

CSSOM 与 DOM一起构建渲染树，浏览器依次使用渲染树来布局和绘制网页。

与HTML文件和DOM相似，加载CSS文件时，必须将它们解析并转换为树-这次是CSSOM 。它描述了页面上的所有CSS选择器，它们的层次结构和属性。
CSSOM 与 DOM的不同之处在于它不能以增量方式构建，因为CSS规则由于特定性而可以在各个不同的点相互覆盖。这就是CSS 阻塞渲染的原因，因为在解析所有CSS并构建CSSOM之前，浏览器无法知道每个元素在屏幕上的位置。