一、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(实际上是汇编代码)。
零散特性
- 如果函数没有被调用，则 V8 不会去编译它。
- 如果函数只被调用 1 次，则 Ignition 将其编译 Bytecode 就直接解释执行了。
- 如果函数被调用多次，则它有可能会被识别为热点函数，且 Ignition 收集的类型信息证明可以进行优化编译的话，这时 TurboFan 则会将 Bytecode 编译为 Optimized Machine Code（已优化的机器码），以提高代码的执行性能。
- 红色虚线是逆向,也就是说Optimized Machine Code 会被还原为 Bytecode，这个过程叫做 Deoptimization。Ignition 收集的信息可能是错误的，比如参数由整数变成字符串。
- 在运行 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 和字节码。
- 减少首次执行代码的速度，减少一次性占用内存量
- 闭包内部属性无法及时销毁
预解析器
V8 引入预解析器，比如当解析顶层代码的时候，遇到了一个函数，那么预解析器并不会直接跳过该函数，而是对该函数做一次快速的预解析。
- 判断是否有语法错误
- 判断函数内部是否引用了外部变量，如果有，则将栈中变量赋值到堆中，下次执行时则使用堆中的引用，同时解决闭包问题
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树的创建。
网友评论