从输入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里图层的概念。并将每一个渲染层进行合并，最终生成一层渲染画面。在绘制过程当中，每一个层独立渲染，并不关心与其余层之间的关系。