html a4页面样式_从输入URL到页面加载 ——页面渲染篇

前言

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

1. 网络请求
2. 页面渲染
   1. 解析HTML文件，构建DOM树
   2. 解析CSS文件，构建CSSOM树
   3. 将DOM树和CSSOM树合并，生成渲染树
   4. 计算渲染树的布局
   5. 将布局渲染到屏幕上

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

---

构建DOM树

什么是DOM树？

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

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

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

利用HTML解释器构建DOM树

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

1. 将字节流转换成字符流，根据不同的编码进行解码
2. 通过词法分析将字符流解析为一个个词语（Token）。这个过程会跳过空格与换行内容。词法分析由HTMLTokenizer完成。
3. 使用XSSAuditor来进行词语验证及过滤，主要是出于安全方面的考虑
4. 在经过XSSAuditor过滤之后，由解释器调用方法构建DOM节点
5. 从上面的DOM节点构建出来DOM树，包括创建元素节点的属性节点工作

---

构建CSSOM

什么是CSSOM？

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

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

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

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

CSS解释器

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

1. 将字节流转换成字符流
2. 接着将字符流转换成词语（Token）
3. 将Token转换成相应的节点
4. 最后组装成CSSOM树

阻塞页面渲染

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

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

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

---

JavaScript解析

阻塞DOM的解析

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

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

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

1. 浏览器下载HTML页面，边下载边解析
2. 解析过程中发现带有defer属性的script标签
3. 网页继续下载解析，同时启动script开始下载外部脚本
4. 等待页面渲染完成，执行下载的脚本

构建渲染树

什么是渲染树？

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

---

布局

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

回流

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

引起回流的操作：

• 页面初始化渲染
• 删除或者新增某个DOM节点
• 修改页面元素的尺寸值
• 改变字体的大小
• 获取某些属性值也会造成回流：
  • offsetTop等
  • scrollTop等
  • clientTop等
  • width、height

---

绘制

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