JS底层原理之浏览器原理

Chromium是目前使用最广泛,功能最强大的浏览器内核,广泛使用在Chrome, Edge等浏览器中。除此之外还有Firefox的Gecko, Safari的webkit。 浏览器内核中最重要的部分就是渲染引擎了。

Chromium实际上一种浏览器的架构,实际上Chrome使用的内核叫做Blink,他是Google基于Webkit开发的一套新的内核。Blink负责渲染真个渲染管道,包括DOM树、样式、事件、和V8集成。它解析DOM树,渲染样式,确定所有元素的视觉几何位置。也就是说浏览器引擎在渲染页面时会调用我们的javascript引擎将javascript编译成本地机器代码并执行,及Blink会调用v8引擎去解析js。 同理Safari的js引擎是JavascriptCore, Firefox的是SpiderMonkey。

V8引擎

接下来就要介绍一下今天的主角V8引擎了。

V8引擎做的第一件事是先下载源代码,可以通过网络、缓存或service workers来完成。

收到代码之后就是解析了,V8引擎会通过解析器识别并创建一个抽象语法书(AST),树上的每个节点都表示代码中的一个结构。类似于虚拟DOM树。

Ignition模块,是引擎的解释器,他可以将AST转换成ByteCode字节码,字节码是0和1组成的二进制文件,也就是计算机可以识别的机器语言。

TurboFan模块,一个编译器,可以将字节码编译为CPU认识的机器码。

一个完整的Javascript引擎的执行过程大概包括:

源代码 -> 抽象语法书 -> 字节码 -> JIT(即时编译) -> 本地代码


Posted

in

by

Tags: