网页渲染过程

前言

工作或生活中，我们经常会接触网页，大家都知道，通过html、css、javascript就能编写一个网页，但是浏览器是如何将只有字符的HTML文件呈现为漂亮的网页呢？在将字符转化成网页过程中浏览器做了什么？

以下是一个简单的html文件

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
  </body>
</html>

上面的网页将在浏览器中呈现如下：

image-20200914141837352.png

这里，我们就以最简单的情况（仅包含html、css）说明一下网页的渲染过程。

网页渲染过程

1. 将HTML转换成DOM树

从处理HTML文件中的一串串字符开始:

首先，浏览器会从磁盘或者网络中读取HTML原始字节，并根据文件编码将它们转成字符。
当遇到HTML标记时，浏览器会发出一个令牌（Token），生成诸如 StartTag: HTML StartTag:head Tag: meta EndTag: head 这样的令牌。
在令牌生成的同时，另一个流程会同时消耗这些令牌并转换成 HTML head 这些节点（Node）对象，起始和结束令牌表明了节点之间的关系。
当所有的令牌消耗完以后就转换成了DOM（文档对象模型）

字节到dom.png

生成的DOM示意图如下所示：

![dom-tree.png](https://upload-images.jianshu.io/upload_images/27234796-0abd7cc4c803080e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)




在Chrome中，可以通过Chrome DevTools查看DOM：

![image-20200914153134021.png](https://upload-images.jianshu.io/upload_images/27234796-7a7e29c5543ad643.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2. 将CSS转换成CSSOM树

当HTML转化成DOM后，接下来浏览器会处理CSS，与转换HTML十分类似。

浏览器会从磁盘或者网络中读取CSS原始字节，并根据文件编码将它们转成字符。
浏览器会识别CSS令牌(Token)，然后将这些令牌转成 CSS 节点(Node)，不过这里有一点需要注意，CSS的子节点会继承父节点的样式规则（这就是层叠规则和层叠样式）。

转换成CSSOM。

                  ![image-20200914143810750.png](https://upload-images.jianshu.io/upload_images/27234796-0697b98a4529d45a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

比如上面的HTML代码有以下的CSS （style.css中的内容）:

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }

最终就转成下面的CSSOM树:

![cssom-tree.png](https://upload-images.jianshu.io/upload_images/27234796-1cf4b1b05638d29a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3. 将DOM和CSSOM树组成RENDER TREE（渲染树）

image-20200914150850218.png

从DOM树的根部开始，遍历每个可见节点 :

如果节点不可见（例如，脚本标记，注释等），它们将不会被渲染，这样的节点会直接跳过。
如果节点通过CSS隐藏（例如，节点的属性标记为 display: none），表示这个节点不应该呈现在页面，这样的节点和其子项都会直接跳过。
对于每个可见节点，找到合适且匹配CSSOM规则，并应用它们。
最终计算出具有内容且其属性样式可见的节点，转换成RENDER TREE（渲染树）。

比如，以上DOM树和CSSOM树合并成渲染树的结果如下:

![render-tree-construction.png](https://upload-images.jianshu.io/upload_images/27234796-f96d59eaea400b19.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


在Chrome中，可以通过Chrome DevTools查看某个DOM对象计算出的CCSOM：

![image-20200914153422162.png](https://upload-images.jianshu.io/upload_images/27234796-4158d92661ed9265.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

4. 布局与绘制

从渲染树我们可以知道哪些节点是可见的，以及它们的CSS计算样式和几何形状，当渲染树完成之后，就可以开始绘制页面。

浏览器将会从根开始遍历渲染树的每一个节点。
计算节点在设备的几何形状、位置和大小，此过程的输出是一个“盒子模型”，它可以精确捕获视口中每个元素的确切位置和大小（所有相对测量值都将转换为屏幕上的绝对像素）。
浏览器进行绘制，将渲染树转换为屏幕上的像素。

在Chrome中，可以通过Chrome DevTools查看整个过程的耗时情况：

image-20200914154010468.png

5. 优化关键渲染路径（The critical rendering path）

上面的步骤1到4也被称为关键路径绘制（英文简称：CRP，具体概念可参考谷歌浏览器的说明：https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path）：

概括的说，关键路径绘制包括：

处理HTML标记并构建DOM树。
处理CSS标记并构建CSSOM树。
将DOM和CSSOM合并到渲染树中。
计算渲染树中节点的几何形状和在屏幕的位置，最终将渲染树转换为屏幕上的像素。

了解网页渲染过程，有助于我们优化网页，提示渲染速度。这个过程被称作优化关键渲染路径（使上述步骤1到4所花费的总时间最小化的过程）

优化关键渲染路径可以使内容尽快呈现到屏幕上，以获得更好的用户体验，但它也是一个很深的课题，不同的浏览器有不同的做法，这是火狐浏览器关于关键渲染路径的文档（https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path）。