浏览器内核和 JS 引擎简析(1)

·  阅读 82

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

1. 浏览器内核是什么

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

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

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

  • Gecko:早期被 NetscapeMozilla Firefox 浏览器使用;
  • Trident:微软开发,被 IE4~IE11 浏览器使用,但是 Edge 浏览器已经转向 Blink;
  • Webkit:苹果基于 KHTML 开发、开源的,用于 SafariGoogle Chrome 之前也在使用;
  • Blink:是 Webkit 的一个分支,Google 开发,目前应用于 Google ChromeEdgeOpera 等浏览器;
  • 等等

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

2. 渲染引擎的工作过程

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

image-20210216110815082.png

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

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

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

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

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改