浏览器内核和 JS 引擎简析（1）

「这是我参与11月更文挑战的第30天，活动详情查看：2021最后一次更文挑战」

1. 浏览器内核是什么

我们知道，在浏览器中可以编写一些 JavaScript 代码并正常运行（比如在 Console 控制台界面编写 JavaScript 代码）。那浏览器为什么能帮助我们运行 JavaScript 代码呢？它内部是什么样的机制呢？这就需要知道浏览器中非常重要的一个组成部分——浏览器内核。

浏览器内核最主要的功能是帮助我们将页面渲染出来，同时帮助我们运行 JavaScript 代码。

不同的浏览器由不同的内核组成：

• Gecko：早期被 Netscape 和 Mozilla Firefox 浏览器使用；
• Trident：微软开发，被 IE4~IE11 浏览器使用，但是 Edge 浏览器已经转向 Blink；
• Webkit：苹果基于 KHTML 开发、开源的，用于 Safari，Google Chrome 之前也在使用；
• Blink：是 Webkit 的一个分支，Google 开发，目前应用于 Google Chrome、Edge、Opera 等浏览器；
• 等等

而我们经常说的浏览器内核指的是浏览器的排版引擎（layout engine，也称为浏览器引擎（browser engine）或页面渲染引擎（rendering engine） 或样版引擎）。

2. 渲染引擎的工作过程

浏览器的工作过程是怎样的呢？下图展示了浏览器内核将页面渲染出来的过程：

• 在这个过程中，HTML 解析的时候如果遇到了 JavaScript 标签，该怎么办呢？
  • 会停止解析 HTML，而去加载和执行 JavaScript 代码；
• 那为什么不直接异步去加载执行 JavaScript 代码，而要在这里停止掉呢？
  • 因为 JavaScript 代码可以操作我们的 DOM，所以浏览器希望将 HTML 解析的 DOM 和 JavaScript 操作之后的 DOM 放到一起来生成最终的 DOM 树，而不是频繁地去生成新的 DOM 树；
• 那么，JavaScript 代码由谁来执行呢？
  • JavaScript 引擎

在浏览器内核对页面进行解析时，还需要有 JavaScript 引擎。我们在编写 HTML 代码时，可以通过编写 script 标签来嵌入 JavaScript 代码，也就是说 HTML 中是包含 JavaScript 代码（以便做一些事情，比如操作 DOM）的。既然有 JavaScript 代码，就必须有一个东西用来执行 JavaScript 代码，这个东西就是 JavaScript 引擎。你可能会问，为什么浏览器不能直接执行 JavaScript 代码呢？这是因为 JavaScript 和 Python、C++、Java 一样，是一门高级语言，高级语言要想执行，必须先转化为汇编语言，汇编语言再转化成机器语言（二进制的 0101...），机器语言才能被计算机所执行。而从 JavaScript 这一高级语言转化到汇编语言再转化为机器语言的过程，就需要 JavaScript 引擎来完成。

因此，在浏览器中其实还包含 JavaScript 引擎，有了 JavaScript 引擎，我们编写的 JavaScript 代码才能被浏览器执行。

以上，就是关于浏览器的渲染过程以及为什么需要 JavaScript 引擎的说明。