一、JavaScript 引擎

• 不同类型的CPU只认自己的汇编代码，js引擎将js代码编译为CPU对应的汇编代码
• 代码执行
• 分配内存
• 垃圾回收

1000100111011000  #机器指令
mov ax,bx         #汇编指令

二、热门JavaScript引擎

V8, JavaScriptCore, Rhino, SpiderMonkey Chakra

三、V8

用c++编写，用于Chrome和Node.js ，V8 会编译 / 执行 JavaScript 代码，管理内存，负责垃圾回收，与宿主语言的交互等

image.png

4个模块

1. Parser

将 JavaScript 源码转为 Abstract Syntax Tree(AST)

2. Ignition(interpreter 解释器)

• 将 AST 转换为 Bytecode ， 并解释执行Bytecode；
• 同时收集 TurboFan 优化编译所需要的信息， 比如 函数参数类型；
  执行时主要有四个模块：内存中的字节码、寄存器、栈、堆

主要的两种解释器： 基于栈（Stack-bases）、基于寄存器（Register-based）
基于栈：使用栈来保存函数参数、中间运算结果、变量等。比如java虚拟机、.Net虚拟机和早起的V8虚拟机。主要优点在于处理函数调用、解决递归问题和切换上下文时简单明快。
基于寄存器：使用寄存器保存参数、中间计算结果。比如现在的V8虚拟机。主要优点将一些中间数据保存到寄存器中。

image.png

3. TurboFan(compiler 编译器)

利用上面Ignition所收集的类型信息，将 Bytecode 转换为优化的 汇编代码

4. Orinoco(garbage collector 垃圾回收模块)

回收内存空间

image.png

简单地说，Parser 将 JS 源码转换为 AST，然后 Ignition 将 AST 转换为 Bytecode，最后 TurboFan 将 Bytecode 转换为经过优化的 Machine Code(实际上是汇编代码)。

零散特性

1. 如果函数没有被调用，则 V8 不会去编译它。
2. 如果函数只被调用 1 次，则 Ignition 将其编译 Bytecode 就直接解释执行了。
3. 如果函数被调用多次，则它有可能会被识别为热点函数，且 Ignition 收集的类型信息证明可以进行优化编译的话，这时 TurboFan 则会将 Bytecode 编译为 Optimized Machine Code（已优化的机器码），以提高代码的执行性能。
4. 红色虚线是逆向,也就是说Optimized Machine Code 会被还原为 Bytecode，这个过程叫做 Deoptimization。Ignition 收集的信息可能是错误的，比如参数由整数变成字符串。
5. 在运行 C、C++以及 Java 等程序之前，需要进行编译，不能直接执行源码；但对于 JavaScript 来说，我们可以直接执行源码(比如：node test.js)，它是在运行的时候先编译再执行，这种方式被称为即时编译(Just-in-time compilation)，简称为 JIT。因此，V8 也属于 JIT 编译器。

四、V8执行一段JavaScript 代码

• V8之前都是采用解释执行的方式，所以很慢
• V8采用即时编译（JIT）的双驱模式（编译器和解释器共同作用）
• 这是一种权衡策略，在启动过程中才用了解释执行（Ignition解释器）的策略，但是如果某段代码的执行频率超过一个值，就采用优化编译器（TurboFan编译器）将其变异成执行效率更高效的机器代码（汇编代码）

image.png

简化来说：

初始化基础环境；
解析源码生成 AST 和作用域；
依据 AST 和作用域生成字节码；
解释执行字节码；
监听热点代码；
优化热点代码为二进制的机器代码；
反优化生成的二进制机器代码。

五、V8特性

1. 解析

惰性解析

解析器在解析的过程中，如果遇到函数声明，那么会跳过函数内部的代码，并不会为其生成 AST 和字节码，而仅仅生成顶层代码的 AST 和字节码。

1. 减少首次执行代码的速度，减少一次性占用内存量
2. 闭包内部属性无法及时销毁

预解析器

V8 引入预解析器，比如当解析顶层代码的时候，遇到了一个函数，那么预解析器并不会直接跳过该函数，而是对该函数做一次快速的预解析。

1. 判断是否有语法错误
2. 判断函数内部是否引用了外部变量，如果有，则将栈中变量赋值到堆中，下次执行时则使用堆中的引用，同时解决闭包问题

2. 存储

快属性和慢属性

快对象

• v8将存在对象本身上的属性成为快属性
• 存在对象本身的属性包括：1. 排序属性（elements）、2. 常规属性（properties）
• 数量固定，只10个
• 使用线性数据结构来保存
• 通过索引来访问，速度快
• 当数量不多时，默认直接写进对象中

慢属性

• 对象内部独立的非线性数据结构（字典）作为容器
• 对增删友好

image.png

3. 堆空间和栈空间

栈

• 通过栈这种数据结构来管理函数的调用过程，把管理函数调用过程的栈结构成为调用栈。
• 通过JavaScript来管理，在内存中是连续的一块空间，同时采用‘先进后出’策略。
• 存储设计上下文相关的内容，如原生类型、引用到的对象地址、函数的执行状态、this值。
• 函数的执行上下文便会被销毁
• 栈结构适合函数调用过程
• 优点：栈上分配资源和销毁资源的速度快，空间连续，移动指针即可
• 缺点：由于栈是连续的，所以很难再内存中分配一块连续的大空间，递归调用很容易栈溢出

堆

• 堆空间是一种树形的存储结构，用来存储对象类型的离散的数据
• 除了原生类型的数据，其他的都是对象类型，诸如函数、数组，在浏览器中还有 window 对象、document 对象等，这些都是存在堆空间的。

4. 机器码与字节码

• 早期直接将JavaScript源代码编译成没有优化的二进制机器码，导致1.编译时间长，2.二进制代码占用更多内存
• 转为字节码（ByteCode）时间短，体积小，可移植

六 从输入URL到生成DOM树

• 地址栏输入URL，WebKit调用资源加载器加载相应资源；
• 加载器依赖网络模块建立连接，发送请求并接收答复；
• WebKit接收各种网页或者资源数据，其中某些资源可能同步或异步获取；
• 网页交给HTML解析器转变为词语；
• 解释器根据词语构建节点，形成DOM树；
• 如果节点是JavaScript代码，调用JavaScript引擎解释并执行；
• JavaScript代码可能会修改DOM树结构；
• 如果节点依赖其他资源，如图片\css、视频等，调用资源加载器加载它们，但这些是异步加载的，不会阻碍当前DOM树继续创建；如果是JavaScript资源URL（没有标记异步方式），则需要停止当前DOM树创建，直到JavaScript加载并被JavaScript引擎执行后才继续DOM树的创建。