「这是我参与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
引擎的说明。