浏览器底层，前端渲染引擎的工作原理

作者：RaphaeKai

https://juejin.cn/post/7389083163333279771

前言

在我们进行前端开发的时候，我们都约定尽可能地把css写/导入在的前面；JS放在的上面；我们运行时又出现各种的逻辑错误导致功能缺陷……这些都是为何呢？ 本文记录分享自己的所学所想，有不正确的地方欢迎指正。

浏览器的心脏——内核

说起浏览器应该都不陌生，每天必须使用的一款工具，简单来说呢，浏览器内核是浏览器的核心，不同的浏览器呢，使用的内核也不一样。 你有没有看过诸如-webkit-tap-highlight-color: transparent、-webkit-scroll-behavior: smooth这样的代码，其实呢，前缀-webkit-就是一种浏览器内核，它是来自于Safari的内核，在之前Chrome也是用的这款内核，现在的Chrome用的是升级的webkit叫做Blink。

兼容性

内核不同，兼容性就会有问题。

就像IE浏览器（使用了兼容性较差的Trident内核），22年6月15日晚永久关闭了。正在逐渐地退出舞台。 为什么只有Trident内核逐渐被淘汰了呢？ 这是因为虽然每个内核都有所不同，但是都会遵循一个标准比如说W3C标准，而早期的IE并没有完全遵循，再加上它的安全问题和性能问题和其他浏览器相比都有所差距，因此也就慢慢下场了。

浏览器的内核，又分为渲染引擎和JS引擎

在现在盛行的Vue和React框架中，如果我们打包项目，我们就会发现打包工具会为我们创建三个文件夹html、css、和js，这也是为了更好地让浏览器兼容并且去识别和下载运行项目。

渲染引擎（Rendering Engine）

渲染引擎主要是渲染引擎的主要职责是将HTML、CSS等资源解析并渲染为可视化的网页内容。类似于印刷机，我们所看到的页面，其实就是渲染引擎渲染的一层一层可以交互的页面。 那么他是怎么工作的呢？

• DOM树构建： 首先呢，它会下载我们的html文件，并解析整个html文件，让每一个元素都转化为DOM节点，一个个节点组合挂载，就构建成了DOM树了。

• CSSOM树构建：在html文件中，我们可能会嵌入或者引入css文件再或者标签内的css样式，这些都是浏览器所不能理解的，遇见css时，同时也会开始构建CSSOM树。可以使用document.styleSheets语句在控制台查看。

• 渲染树构建 ：将DOM树和CSSOM树合并，生成渲染树（Render树）。遍历DOM树的所有可见节点（如p、span），忽略不可见节点（head等），结合CSSOM树，为了提高效率，会从叶子节点开始寻找。构建成Render树。（所以我们使用css选择器的时候也会从左边开始寻找喔）

  • 浏览器将每个节点绘制（Paint）到屏幕上。
  • 在绘制阶段，浏览器将布局阶段计算的每个 frame 转换为屏幕上实际的像素点。
  • 这个过程包括将元素的可见部分进行绘制，一层一层绘制完成，就得到我们所看见的页面了。

• • 布局计算（图层计算模块） ：有了render树，浏览器就知道了需要展示的元素，再结合盒模型遍历render树，根据弹性布局、浮动、position等信息进行定位，z-index确定图层等，最后生成layout树。

  • 视图绘制：

OK了啊，渲染引擎已经成功渲染页面了。这就是最开始的静态页面。现在似乎理解了一些问题。

渲染引擎工作的时候需要用到css，而构建CSSOM树的时候，需要去进行遍历，所以css会阻塞，但是它不会阻塞DOM树的构建，而是阻塞DOM树的渲染。（另外了解到渲染引擎构建DOM树的速度非常快）

JS引擎

JavaScript引擎主要由解析器（Parser） 、解释器（Interpreter） 、优化器（Optimizer）和垃圾回收器（Garbage Collector） 等部分组成。

JavaScript引擎主要通过解析、编译和执行三个步骤，再结合垃圾回收和事件循环机制，高效地解析和执行JavaScript代码，不断优化代码执行，确保性能和效率。

• 解析过程

首先会进行词法分析和语法分析，词法分析将源代码语句分成一个个的词法单元标记takens，比如说你的关键字，变量。然后语法分析就会讲这些标记遵循语法规则转换为一个个节点，这些节点就会转换为抽象语法树（Abstract Syntax Tree，简称AST）

• 编译

在编译过程中编译器会对抽象语法树进行优化，并将其转换为对应的字节码或机器码，然后进行编译，可以了解下这篇文章预编译^[1]。

• 最后就是执行了

执行过程中也有很多的逻辑如事件循环、同步、异步等等。