深入JavaScript运行原理

cocoCola91667
253 阅读8分钟

JavaScript应用越来越广泛

JavaScript让人迷惑的知识点

TypeScript会取代JavaScript吗？

JavaScript是一门编程语言

浏览器的工作原理

当我们在浏览器中输入地址的时候，服务器会给我们返回index.html文件，浏览器内核在解析index.html文件的时候，遇到link标签会下载css文件，遇到script标签的时候会下载js文件，这时候我们需要的css和js代码都已经被下载下来了。浏览器内核会将html文件和css文件渲染成DOM树，然后布局，最后显示到界面上。如果遇到js代码，就需要js引擎来执行代码，其中最著名的就是V8引擎。

认识浏览器的内核

浏览器渲染过程

认识JavaScript引擎

浏览器内核和JS引擎的关系

V8引擎的原理

我们来看一下官方对V8引擎的定义：

  • V8是用C ++编写的Google开源高性能JavaScript和WebAssembly引擎，它用于Chrome和Node.js等。
  • 它实现ECMAScript和WebAssembly，并在Windows 7或更高版本，macOS 10.12+和使用x64，IA-32，ARM或MIPS处理器的Linux系统上运行。
  • V8可以独立运行，也可以嵌入到任何C ++应用程序中。

  1. V8引擎会先将JS代码经过词法分析、语法分析解析（通过Parse模块）成AST语法树，然后再转成字节码（通过Ignition模块），字节码是跨平台的，最后运行的时候再将字节码转成汇编代码，然后再转成机器码。
  2. 如果某个函数是经常调用的，V8引擎（通过TuboFan模块）会将字节码直接转成机器码，这样执行函数的时候效率会高很多。（V8引擎的优化）
  3. 因为JS没有类型检测，如果函数传入的参数不一样了，V8引擎检测到以后，会将机器码再转成字节码（Deoptimization）（比如：sum(1,2)，本来是传数字，后来我们传字符串了sum('a'+'b')）。（V8引擎的优化）

具体详细架构如下：

V8引擎的架构

V8引擎本身的源码非常复杂，大概有超过100w行C++代码，通过了解它的架构，我们可以知道它是如何对JavaScript执行的：

  1. Parse模块会将JavaScript代码转换成AST（抽象语法树），这是因为解释器并不直接认识JavaScript代码；
  • 如果函数没有被调用，那么是不会被转换成AST的；
  • Parse的V8官方文档：v8.dev/blog/scanne…
  1. Ignition是一个解释器，会将AST转换成ByteCode（字节码）
  • 同时会收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）；
  • 如果函数只调用一次，Ignition会执行解释执行ByteCode；
  • Ignition的V8官方文档：v8.dev/blog/igniti…
  1. TurboFan是一个编译器，可以将字节码编译为CPU可以直接执行的机器码；
  • 如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能；
  • 但是，机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数原来执行的是number类型，后来执行变成了string类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码；
  • TurboFan的V8官方文档：v8.dev/blog/turbof…

V8引擎的解析图（官方）

详细解释如下：

V8执行的细节

那么我们的JavaScript源码是如何被解析（Parse过程）的呢？

  1. Blink将源码交给V8引擎，Stream获取到源码并且进行编码转换；
  2. Scanner会进行词法分析（lexical analysis），词法分析会将代码转换成tokens；
  3. 接下来tokens会被转换成AST树，经过Parser和PreParser：
  • Parser就是直接将tokens转成AST树架构；
  • PreParser称之为预解析，为什么需要预解析呢？ 这是因为并不是所有的JavaScript代码，在一开始时就会被执行。那么对所有的JavaScript代码进行解析，必然会影响网页的运行效率； 所以V8引擎就实现了Lazy Parsing（延迟解析）的方案，它的作用是将不必要的函数进行预解析，也就是只解析暂时需要的内容，而对函数的全量解析是在函数被调用时才会进行； 比如我们在一个函数outer内部定义了另外一个函数inner，那么inner函数就会进行预解析；
  1. 生成AST树后，会被Ignition转成字节码（bytecode），之后的过程就是代码的执行过程。

JavaScript的执行过程

假如我们有下面一段代码，它在JavaScript中是如何被执行的呢？

初始化全局对象

js引擎会在执行代码之前，会在堆内存中创建一个全局对象：Global Object（GO）, 该对象所有的作用域（scope）都可以访问；里面会包含Date、Array、String、Number、setTimeout、setInterval等等；其中还有一个window属性指向自己；

执行上下文栈（调用栈）

js引擎内部有一个执行上下文栈（Execution Context Stack，简称ECS），它是用于执行代码的调用栈。

那么现在它要执行谁呢？
执行的是全局的代码块, 全局的代码块为了执行会构建一个 Global Execution Context（GEC）；GEC会 被放入到ECS中 执行；

GEC被放入到ECS中里面包含两部分内容：

  1. 第一部分：在代码执行前，在parser转成AST的过程中，会将全局定义的变量、函数等加入到GlobalObject中，但是并不会赋值；这个过程也称之为变量的作用域提升（hoisting）
  2. 第二部分：在代码执行中，对变量赋值，或者执行其他的函数；

GEC被放入到ECS中

GEC开始执行代码

遇到函数如何执行？

在执行的过程中执行到一个函数时，就会根据函数体创建一个函数执行上下文（Functional Execution Context，简称FEC），并且压入到EC Stack中。

FEC中包含三部分内容：

  1. 第一部分：在解析函数成为AST树结构时，会创建一个Activation Object（AO）：AO中包含函数体、形参、arguments、函数里面定义的变量；
  2. 第二部分：作用域链：由VO（在函数中就是AO对象）和父级VO组成，查找时会一层层查找，这就是作用域链，如果找不到就是undefined；
  3. 第三部分：this绑定的值，this绑定的值是在运行时才决定的，这个后面再说；

FEC被放入到ECS中

FEC开始执行代码

变量环境和记录

作用域提升面试题

上面打印：Hello Global。foo和bar都有对应的AO对象，打印的时候，foo的AO里面没有message，所以去它的父级作用域也就是GO里面找，所以打印Hello Global。

var n = 100

function foo() {
  n = 200
}

foo()

console.log(n) //200
// 函数对应的AO里面没有n，所以会去GO里面找，然后把n赋值，所以打印200

function foo() {
  console.log(n) //打印的是AO的n，是undefined
  var n = 200
  console.log(n) //打印AO里面的n，是200
}

var n = 100
foo()

var a = 100

function foo() {
  console.log(a) //打印undefined 解析的时候,AO里面是有个a为undefined
  return // 代码执行的时候遇到return才会停止，解析的时候不会停止
  var a = 200 
}

foo()

function foo() {
  m = 100 //这种语法一般是错误的,因为要写成 var m = 100
  // 但是js引擎遇到这种语法的时候,会把它放到全局对象里面,也就是GO,所以打印100
}

foo()
console.log(m) //100

function foo() {
  var a = b = 10
  // => 转成下面的两行代码
  // var a = 10
  // b = 10
}

foo()

console.log(a) //GO中没有a，所以打印undefined
console.log(b) //GO中有b，所以打印10

当GO中有同名的函数和变量的时候，此时优先赋值函数，如下：

console.log(a);
function a() {
  console.log('aaaaa');
}
var a = 1;
console.log(a);

打印：
/*
ƒ a() {
  console.log('aaaaa');
}
1
*/

补充：默认参数的作用域

当函数的参数有默认值时, 会形成一个新的作用域, 这个作用域用于保存参数的值。

var x = 0

// 当函数的参数有默认值时, 会形成一个新的作用域, 这个作用域用于保存参数的值
function foo(x, y = function() { x = 3; console.log(x) }) {
  console.log(x) // undefined
  var x = 2
  y() // 3
  console.log(x) // 2
}

foo()
console.log(x) // 0

// undefined
// 3
// 2
// 0

函数作用域 -> 参数作用域 -> 全局作用域。

  1. 首先，执行11行的时候会调用函数，函数有默认参数，所以会形成参数作用域，参数作用域里面有x = undefined, y = function() { x = 3; console.log(x) }
  2. 执行第5行，打印x，函数作用域里面没有x，所以去上层作用域（参数作用域）里面找，所以打印undefined
  3. 执行第6行，这时候函数作用域里面有了一个x = 2
  4. 执行第7行，调用函数y，访问的是参数作用域里的x，所以将x从undefined变成3，所以打印3
  5. 执行第8行，访问的是函数作用域中的x，所以打印2
  6. 执行第12行，访问的是全局作用域中的x，所以打印0
  7. 所以最后结果才是：undefined 3 2 0
avatar
文章
阅读
粉丝