从输入URL到页面加载 ——页面渲染篇本文主要介绍页面渲染部分。 DOM 将文档解析为一个由节点和对象（包含属性和方法的

前言

在Web相关的问题中，从输入URL到整个页面加载展示到用户面前这个问题是绕不开的，它主要涉及到两个步骤：

本文主要介绍页面渲染部分。

DOM模型：HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

DOM的结构是由各种子节点组成的，那么以HTMLDocument为根节点，其余节点为子节点，那么组织成的树型数据结构的表示就是DOM树。

HTML解释器会将从网络或者本地获取的HTML文件解析成DOM树。需要经过以下几个步骤：

CSSOM（CSS对象模型）定义了媒体查询、选择器以及CSS本身的一系列API（包括一般的解析和序列化规则）。它是对附在DOM结构树上的样式的表达，与DOM树的呈现方式相似，只是每个节点都会带上样式属性，包括明确定义和隐式继承的样式。

CSS是一种渲染阻塞资源(render blocking resource)，它需要完全被解析完毕之后才能进入生成渲染树的环节。

CSS并不像HTML那样能执行部分并显示，因为CSS具有继承属性，后面定义的样式会覆盖或者修改前面的样式。如果我们只使用样式表中部分解析好的样式，我们可能会得到错误的页面效果。所以，我们只能等待CSS完全解析之后，才能进入关键渲染路径的下一环节。

在CSSOM构建完毕之前，页面会一直处于白屏状态，这也是为什么建议将CSS引用及<style>标签放在head中，通过优先解析CSS，从而提高用户体验。

与处理HTML的逻辑一样，CSS解释器做的工作也是将收到的CSS文件转换成浏览器能够理解处理的结构：

CSSOM树在构建过程中会阻塞页面的渲染，但是不会阻塞DOM的解析。

因为DOM树与CSSOM树的解析生成是独立的，在生成过程中无需阻塞DOM解析。

对于页面渲染来说，如果CSSOM树不进行阻塞，那会使页面首先呈现出一个版本，在浏览器加载完毕CSSOM树渲染后又变更了一个版本，用户体验很差，而且反复渲染的成本也很高。

JavaScript可以操作DOM来修改DOM结构，因此在遇到外链脚本或者script标签时，需要等待这部分代码执行完成才会继续解析DOM。

一般现在的浏览器对这部分有做一些优化，在脚本阻塞时会继续下载其他资源，但是解析DOM的过程依然是阻塞的，只是优化了下载资源这个步骤。因此一般是建议将script标签放在页面底部。

同时也可以通过增加defer属性来改变脚本的执行特性，使其延迟执行：

当DOM树与CSSOM树构建完成后，浏览器会将两者进行结合，生成渲染树，这棵树包含了页面所有可见元素及其渲染信息。

渲染树生成之后，浏览器会根据渲染树中的样式以及设备的屏幕尺寸，来计算每个元素的坐标和大小。

如果页面元素的结构、位置或者尺寸发生了变化，那么就需要重新计算样式并构建渲染树。回流的性能成本开销是比较高的，一般开发时都需要尽量避免页面频繁回流。

引起回流的操作：

计算最终的渲染信息，在实际的渲染过程中浏览器会在尽可能多的层上去渲染，类似于Photoshop里图层的概念。并将每个渲染层进行合并，最终生成一层渲染画面。在绘制过程中，每个层独立渲染，并不关心与其他层之间的关系。