网页渲染过程
前言
工作或生活中，我们经常会接触网页，大家都知道，通过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>
上面的网页将在浏览器中呈现如下：
这里，我们就以最简单的情况（仅包含html、css）说明一下网页的渲染过程。
网页渲染过程
1. 将HTML转换成DOM树
从处理HTML文件中的一串串字符开始:
- 首先，浏览器会从磁盘或者网络中读取HTML原始字节，并根据文件编码将它们转成字符。
- 当遇到HTML标记时，浏览器会发出一个令牌（
Token），生成诸如StartTag: HTMLStartTag:headTag: metaEndTag: head这样的令牌。 - 在令牌生成的同时，另一个流程会同时消耗这些令牌并转换成
HTMLhead这些节点（Node）对象，起始和结束令牌表明了节点之间的关系。 - 当所有的令牌消耗完以后就转换成了DOM（文档对象模型）
生成的DOM示意图如下所示：
在Chrome中，可以通过Chrome DevTools查看DOM：
2. 将CSS转换成CSSOM树
当HTML转化成DOM后，接下来浏览器会处理CSS，与转换HTML十分类似。
浏览器会从磁盘或者网络中读取CSS原始字节，并根据文件编码将它们转成字符。
浏览器会识别CSS令牌(
Token)，然后将这些令牌转成 CSS 节点(Node)，不过这里有一点需要注意，CSS的子节点会继承父节点的样式规则（这就是层叠规则和层叠样式）。-
转换成CSSOM。
比如上面的HTML代码有以下的CSS （style.css中的内容）:
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
最终就转成下面的CSSOM树:
3. 将DOM和CSSOM树组成RENDER TREE（渲染树）
从DOM树的根部开始，遍历每个可见节点 :
- 如果节点不可见（例如，脚本标记，注释等），它们将不会被渲染，这样的节点会直接跳过。
- 如果节点通过CSS隐藏 （例如，节点的属性标记为
display: none），表示这个节点不应该呈现在页面，这样的节点和其子项都会直接跳过。 - 对于每个可见节点，找到合适且匹配CSSOM规则，并应用它们。
- 最终计算出具有内容且其属性样式可见的节点，转换成RENDER TREE（渲染树）。
比如，以上DOM树和CSSOM树合并成渲染树的结果如下:
在Chrome中，可以通过Chrome DevTools查看某个DOM对象计算出的CCSOM：
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）。
6. 结尾
以上，便是笔者对网页渲染过程的简单见解，此文章由笔者参考资料并加上自己的见解得来，若其中有不准确的地方还请指正
7. 参考文章
https://blog.logrocket.com/how-browser-rendering-works-behind-the-scenes-6782b0e8fb10/
https://stackoverflow.com/questions/27637184/what-is-dom-reflow/27637245#27637245
