步骤
- 根据源代码生成抽象语法树（AST）和执行上下文。
- 根据AST生成字节码。
- 执行代码。
生成AST
根据代码生成一个树形数据结构。比如
var myName = "极客时间"
function foo(){
return 23;
}
myName = "geektime"
foo()
上段代码会生成如下的AST
生成的AST
生成AST需经历两个阶段：词法分析和语法分析。
词法分析
将代码拆分成不可继续拆分的最小单位，如变量名、操作符、字符串等。这些小的单位也被称为token。
语法分析
- 将之前所得token根据js的语法生成AST。
- 代码语法正确时会顺利生成AST，语法有误时会报错。
- 有了AST就可生成执行上下文。
生成字节码
- 通过解释器Ignition根据AST生成字节码。
- 字节码是介于AST和机器码之间的一种代码，与平台无关，需经解释器转换为机器码后才能被执行。
- 字节码存储在v8实例的堆内存中。
执行
生成字节码后进入执行阶段。
- 第一次执行字节码时，解释器会逐条解释执行。
- 执行过程发现有热点代码（被多次执行的代码）时，会调用编译器生成该部分字节码所对应的高效的机器码。
- 在后续再次执行热点代码时，直接执行机器码。提升代码的执行效率。
- 以上用到了即时编译（JIT）技术。
JS性能优化
- 提升单次脚本的执行速度，避免 JavaScript 的长任务霸占主线程，这样可以使得页面快速响应交互。
- 避免大的内联脚本，因为在解析 HTML 的过程中，解析和编译也会占用主线程。
- 减少 JavaScript 文件的容量，因为更小的文件会提升下载速度，并且占用更低的内存。
来源：极客时间-浏览器工作原理
