浏览器渲染基本原理
浏览器对于前端工程师，就相当于赛车于赛车手，想要更好的在赛道上驰骋，就需要对自己的赛车有更深入的了解，甚至人车合一，所以本篇文章我们就来打开浏览器的大门，一起努力吧！
前言
一篇文章很难将所有的细节覆盖，同时我们也不需要将所有流程和每一个环节都摸透，我们就依照脉络来聊一聊浏览器的渲染过程。
我们都知道一个页面通常由三个部分组成，即HTMl+CSS+JS，并通过一系列的步骤转换。
- HTML 的内容是由标记和文本组成
- CSS 称为层叠样式表，是由选择器和属性组成
- JS 是可以使网页的内容“动”起来
用户请求的 HTML 文本(text/html)基础的渲染流程图大致是这样的：
- 解析 HTML+CSS -> 解析 HTML 生成 DOM 树，同时解析 CSS 生成 CSSOM 树
- 构建 Render 树 -> “枝干”和“树芽”配合，两个合并生成新的用于渲染的树
- 布局 Render 树 -> 对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置
- 绘制 Render 树 -> 最后遍历渲染树并用 UI 后端层将每一个节点绘制出来，前三步都是在绘制“蓝图”
用流程表示如下图：
既然浏览的渲染分流程，我们也按照它的顺序来了解每一步都发生了什么。
一、浏览器渲染基本步骤
引入一个概念——关键渲染路径
从收到 HTML、CSS 和 JavaScript 字节到对其进行必需的处理，从而将它们转变成渲染的像素这一过程，即关键渲染路径。
1.1 构建对象模型
斟酌了一下，决定将 DOM 树和 CSSOM 树放在一起。浏览器在渲染页面之前第一步就需要先构建
DOM树和CSSOM树，因此我们需要确保尽快将 HTML 和 CSS 提供给浏览器。
下面是构建对象模型的描述，本章就这些内容：
- 字节 → 字符 → 令牌 → 节点 → 对象模型
- HTML 标记转换成文档对象模型 (DOM)；
- CSS 标记转换成 CSS 对象模型 (CSSOM)。
- DOM 和 CSSOM 是独立的数据结构。
- Chrome DevTools Timeline 让我们可以捕获和检查 DOM 和 CSSOM 的构建和处理开销。
1.1.1 DOM 树（文档对象模型）
因为浏览器不能直接理解和使用 HTML，所以需要将 HTML 解析为浏览器能够理解的结构，即 DOM 树。DOM 树的根节点就是 document 对象。
试想一下这段代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>DOM</title>
</head>
<body>
<p>Hello <span>web performance</span> performance</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
一个包含一些文本和一幅图片的普通 HTML 页面。经过字节 -> 字符 … -> 模型过程
- 转换: 浏览器从磁盘或网络读取 HTML 的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成各个字符。
- 令牌化: 浏览器将字符串转换成 W3C HTML5 标准规定的各种令牌，例如，
<html>、<body>，以及其他尖括号内的字符串。每个令牌都具有特殊含义和一组规则。 - 词法分析: 发出的令牌转换成定义其属性和规则的“对象”。
- DOM 构建: 最后，由于 HTML 标记定义不同标记之间的关系（一些标记包含在其他标记内）
最低0.47元/天 解锁文章
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
