浏览器是如何工作的：Chrome V8让你更懂JavaScript

V8 是由 Google 开发的开源 JavaScript 引擎，也被称为虚拟机，模拟实际计算机各种功能来实现代码的编译和执行。

记得那年花下，深夜，初识谢娘时

为什么需要 JavaScript 引擎

我们写的 JavaScript 代码直接交给浏览器或者 Node 执行时，底层的 CPU 是不认识的，也没法执行。CPU 只认识自己的指令集，指令集对应的是汇编代码。写汇编代码是一件很痛苦的事情。并且不同类型的 CPU 的指令集是不一样的，那就意味着需要给每一种 CPU 重写汇编代码。

JavaScirpt 引擎可以将 JS 代码编译为不同 CPU(Intel, ARM 以及 MIPS 等)对应的汇编代码，这样我们就不需要去翻阅每个 CPU 的指令集手册来编写汇编代码了。当然，JavaScript 引擎的工作也不只是编译代码，它还要负责执行代码、分配内存以及垃圾回收。

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

资料拓展： 汇编语言入门教程【阮一峰】 | 理解 V8 的字节码「译」

https://zhuanlan.zhihu.com/p/28590489

热门 JavaScript 引擎

•  V8 (Google)，用 C++编写，开放源代码，由 Google 丹麦开发，是 Google Chrome 的一部分，也用于 Node.js。
•  JavaScriptCore (Apple)，开放源代码，用于 webkit 型浏览器，如 Safari ，2008 年实现了编译器和字节码解释器，升级为了 SquirrelFish。苹果内部代号为“Nitro”的 JavaScript 引擎也是基于 JavaScriptCore 引擎的。
•  Rhino，由 Mozilla 基金会管理，开放源代码，完全以 Java 编写，用于 HTMLUnit
•  SpiderMonkey (Mozilla)，第一款 JavaScript 引擎，早期用于 Netscape Navigator，现时用于 Mozilla Firefox。
•  Chakra (JScript 引擎)，用于 Internet Explorer。
•  Chakra (JavaScript 引擎)，用于 Microsoft Edge。
•  KJS，KDE 的 ECMAScript／JavaScript 引擎，最初由哈里·波顿开发，用于 KDE 项目的 Konqueror 网页浏览器中。
•  JerryScript — 三星推出的适用于嵌入式设备的小型 JavaScript 引擎。
•  其他：Nashorn、QuickJS 、 Hermes

V8

Google V8 引擎是用 C ++编写的开源高性能 JavaScript 和 WebAssembly 引擎，它已被用于 Chrome 和 Node.js 等。可以运行在 Windows 7+，macOS 10.12+和使用 x64，IA-32，ARM 或 MIPS 处理器的 Linux 系统上。V8 最早被开发用以嵌入到 Google 的开源浏览器 Chrome 中，第一个版本随着第一版Chrome于 2008 年 9 月 2 日发布。但是 V8 是一个可以独立运行的模块，完全可以嵌入到任何 C ++应用程序中。著名的 Node.js( 一个异步的服务器框架，可以在服务端使用 JavaScript 写出高效的网络服务器 ) 就是基于 V8 引擎的，Couchbase, MongoDB 也使用了 V8 引擎。  

和其他 JavaScript 引擎一样，V8 会编译 / 执行 JavaScript 代码，管理内存，负责垃圾回收，与宿主语言的交互等。通过暴露宿主对象 ( 变量，函数等 ) 到 JavaScript，JavaScript 可以访问宿主环境中的对象，并在脚本中完成对宿主对象的操作。

与君初相识，犹如故人归

什么是 D8

d8 是一个非常有用的调试工具，你可以把它看成是 debug for V8 的缩写。我们可以使用 d8 来查看 V8 在执行 JavaScript 过程中的各种中间数据，比如作用域、AST、字节码、优化的二进制代码、垃圾回收的状态，还可以使用 d8 提供的私有 API 查看一些内部信息。

安装 D8

•  方法一：自行下载编译
  •  v8 google 下载及编译使用
  •  官方文档：Using d8
•  方法二：使用编译好的 d8 工具
•  mac 平台：

https://storage.googleapis.com/chromium-v8/official/canary/v8-mac64-dbg-8.4.109.zip

•  linux32 平台：

https://storage.googleapis.com/chromium-v8/official/canary/v8-linux32-dbg-8.4.109.zip

•  linux64 平台：

https://storage.googleapis.com/chromium-v8/official/canary/v8-linux64-dbg-8.4.109.zip

• win32 平台：

https://storage.googleapis.com/chromium-v8/official/canary/v8-win32-dbg-8.4.109.zip

• win64 平台：

https://storage.googleapis.com/chromium-v8/official/canary/v8-win64-dbg-8.4.109.zip

 
 
 
 
  
  
  
  
// 解压文件，点击d8打开（mac安全策略限制的话，按住control，再点击，弹出菜单中选择打开）  
  
  
  
  
  V8 version 8.4.109  
  
  
  
  
  d8> 1 + 2  
  
  
  
  
    3  
  
  
  
  
  d8> 2 + '4'  
  
  
  
  
    "24"  
  
  
  
  
  d8> console.log(23)  
  
  
  
  
    23  
  
  
  
  
    undefined  
  
  
  
  
  d8> var a = 1  
  
  
  
  
    undefined  
  
  
  
  
  d8> a + 2  
  
  
  
  
    3  
  
  
  
  
  d8> this  
  
  
  
  
    [object global]  
  
  
  
  
  d8> 
 
 
 

本文后续用于 demo 演示时的文件目录结构：

 
 
 
 
  
  
  
  
V8：  
  
  
  
  
   # d8可执行文件  
  
  
  
  
   d8  
  
  
  
  
   icudtl.dat  
  
  
  
  
   libc++.dylib  
  
  
  
  
   libchrome_zlib.dylib  
  
  
  
  
   libicui18n.dylib  
  
  
  
  
   libicuuc.dylib  
  
  
  
  
   libv8.dylib  
  
  
  
  
   libv8_debug_helper.dylib  
  
  
  
  
   libv8_for_testing.dylib  
  
  
  
  
   libv8_libbase.dylib  
  
  
  
  
   libv8_libplatform.dylib  
  
  
  
  
   obj  
  
  
  
  
   snapshot_blob.bin  
  
  
  
  
   v8_build_config.json  
  
  
  
  
   # 新建的js示例文件  
  
  
  
  
   test.js 
 
 
 

•  方法三：mac 

 
 
 
 
  
  
  
  
# 如果已有HomeBrew，忽略第一条命令  
  
  
  
  
  ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"  
  
  
  
  
  brew install v8 
 
 
 

•  方法四：使用 node 代替，比如可以用node --print-bytecode ./test.js，打印出 Ignition（解释器）生成的 Bytecode（字节码）。

都有哪些 d8 命令可供使用？

•  查看 d8 命令 

 
 
 
 
  
  
  
  
# 如果不想使用./d8这种方式进行调试，可将d8加入环境变量，之后就可以直接`d8 --help`了  
  
  
  
  
  ./d8 --help 
 
 
 

•  过滤特定的命令，如： 

 
 
 
 
  
  
  
  
# 如果是 Windows 系统，可能缺少 grep 程序，请自行下载安装并添加环境变量  
  
  
  
  
  ./d8 --help |grep print 
 
 
 

•   print-bytecode 查看生成的字节码
•   print-opt-code 查看优化后的代码
•   print-ast 查看中间生成的 AST
•   print-scopes 查看中间生成的作用域
•   trace-gc 查看这段代码的内存回收状态
•   trace-opt 查看哪些代码被优化了
•   trace-deopt 查看哪些代码被反优化了
•   turbofan-stats 打印优化编译器的一些统计数据

使用 d8 进行调试

 
 
 
 
  
  
  
  
// test.js  
  
  
  
  
function sum(a) {  
  
  
  
  
  var b = 6;  
  
  
  
  
  return a + 6;  
  
  
  
  
}  
  
  
  
  
console.log(sum(3));  
 
 
 

 
 
 
 
  
  
  
  
# d8 后面跟上文件名和要执行的命令，如执行下面这行命令，就会打印出 test.js 文件所生成的字节码。  
  
  
  
  
  ./d8 ./test.js --print-bytecode  
  
  
  
  
  # 执行以下命令，输出9  
  
  
  
  
  ./d8 ./test.js 
 
 
 

内部方法

你还可以使用 V8 所提供的一些内部方法，只需要在启动 V8 时传入 --allow-natives-syntax 命令，你就可以在 test.js 中使用诸如HasFastProperties（检查一个对象是否拥有快属性）的内部方法(索引属性、常规属性、快属性等下文会介绍)。

 
 
 
 
  
  
  
  
function Foo(property_num, element_num) {  
  
  
  
  
  //添加可索引属性  
  
  
  
  
  for (let i = 0; i < element_num; i++) {  
  
  
  
  
    this[i] = `element${i}`;  
  
  
  
  
  }  
  
  
  
  
  //添加常规属性  
  
  
  
  
  for (let i = 0; i < property_num; i++) {  
  
  
  
  
    let ppt = `property${i}`;  
  
  
  
  
    this[ppt] = ppt;  
  
  
  
  
  }  
  
  
  
  
}  
  
  
  
  
var bar = new Foo(10, 10);  
  
  
  
  
// 检查一个对象是否拥有快属性  
  
  
  
  
console.log(%HasFastProperties(bar));  
  
  
  
  
delete bar.property2;  
  
  
  
  
console.log(%HasFastProperties(bar));  
 
 
 

 
 
 
 
  
  
  
  
./d8 --allow-natives-syntax ./test.js  
  
  
  
  
# 依次打印：true false 
 
 
 

心似双丝网，中有千千结

V8 引擎的内部结构

V8 是一个非常复杂的项目，有超过 100 万行 C++代码。它由许多子模块构成，其中这 4 个模块是最重要的：

•  Parser：负责将 JavaScript 源码转换为 Abstract Syntax Tree (AST)
•  Ignition：interpreter，即解释器，负责将 AST 转换为 Bytecode，解释执行 Bytecode；同时收集 TurboFan 优化编译所需的信息，比如函数参数的类型；解释器执行时主要有四个模块，内存中的字节码、寄存器、栈、堆。

通常有两种类型的解释器，基于栈 (Stack-based)和基于寄存器 (Register-based)，基于栈的解释器使用栈来保存函数参数、中间运算结果、变量等；基于寄存器的虚拟机则支持寄存器的指令操作，使用寄存器来保存参数、中间计算结果。通常，基于栈的虚拟机也定义了少量的寄存器，基于寄存器的虚拟机也有堆栈，其区别体现在它们提供的指令集体系。大多数解释器都是基于栈的，比如 Java 虚拟机，.Net 虚拟机，还有早期的 V8 虚拟机。基于堆栈的虚拟机在处理函数调用、解决递归问题和切换上下文时简单明快。而现在的 V8 虚拟机则采用了基于寄存器的设计，它将一些中间数据保存到寄存器中。

基于寄存器的解释器架构： 

•  TurboFan：compiler，即编译器，利用 Ignitio 所收集的类型信息，将 Bytecode 转换为优化的汇编代码；
•  Orinoco：garbage collector，垃圾回收模块，负责将程序不再需要的内存空间回收。

其中，Parser，Ignition 以及 TurboFan 可以将 JS 源码编译为汇编代码，其流程图如下：

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

•  如果函数没有被调用，则 V8 不会去编译它。
•  如果函数只被调用 1 次，则 Ignition 将其编译 Bytecode 就直接解释执行了。TurboFan 不会进行优化编译，因为它需要 Ignition 收集函数执行时的类型信息。这就要求函数至少需要执行 1 次，TurboFan 才有可能进行优化编译。
•  如果函数被调用多次，则它有可能会被识别为热点函数，且 Ignition 收集的类型信息证明可以进行优化编译的话，这时 TurboFan 则会将 Bytecode 编译为 Optimized Machine Code（已优化的机器码），以提高代码的执行性能。  

图片中的红色虚线是逆向的，也就是说Optimized Machine Code 会被还原为 Bytecode，这个过程叫做 Deoptimization。这是因为 Ignition 收集的信息可能是错误的，比如 add 函数的参数之前是整数，后来又变成了字符串。生成的 Optimized Machine Code 已经假定 add 函数的参数是整数，那当然是错误的，于是需要进行 Deoptimization。

 
 
 
 
  
  
  
  
function add(x, y) {  
  
  
  
  
  return x + y;  
  
  
  
  
}  
  
  
  
  
add(3, 5);  
  
  
  
  
add('3', '5'); 
 
 
 

在运行 C、C++以及 Java 等程序之前，需要进行编译，不能直接执行源码；但对于 JavaScript 来说，我们可以直接执行源码(比如：node test.js)，它是在运行的时候先编译再执行，这种方式被称为即时编译(Just-in-time compilation)，简称为 JIT。因此，V8 也属于 JIT 编译器。

V8 是怎么执行一段 JavaScript 代码的

•  在 V8 出现之前，所有的 JavaScript 虚拟机所采用的都是解释执行的方式，这是 JavaScript 执行速度过慢的一个主要原因。而 V8 率先引入了即时编译（JIT）的双轮驱动的设计（混合使用编译器和解释器的技术），这是一种权衡策略，混合编译执行和解释执行这两种手段，给 JavaScript 的执行速度带来了极大的提升。V8 出现之后，各大厂商也都在自己的 JavaScript 虚拟机中引入了 JIT 机制，所以目前市面上 JavaScript 虚拟机都有着类似的架构。另外，V8 也是早于其他虚拟机引入了惰性编译、内联缓存、隐藏类等机制，进一步优化了 JavaScript 代码的编译执行效率。
•  V8 执行一段 JavaScript 的流程图：    

•  V8 本质上是一个虚拟机，因为计算机只能识别二进制指令，所以要让计算机执行一段高级语言通常有两种手段：
  •  第一种是将高级代码转换为二进制代码，再让计算机去执行；
  •  另外一种方式是在计算机安装一个解释器，并由解释器来解释执行。
•  解释执行和编译执行都有各自的优缺点，解释执行启动速度快，但是执行时速度慢，而编译执行启动速度慢，但是执行速度快。为了充分地利用解释执行和编译执行的优点，规避其缺点，V8 采用了一种权衡策略，在启动过程中采用了解释执行的策略，但是如果某段代码的执行频率超过一个值，那么 V8 就会采用优化编译器将其编译成执行效率更加高效的机器代码。
•  总结：

V8 执行一段 JavaScript 代码所经历的主要流程包括：

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

一等公民与闭包

一等公民的定义

•  在编程语言中，一等公民可以作为函数参数，可以作为函数返回值，也可以赋值给变量。
•  如果某个编程语言的函数，可以和这个语言的数据类型做一样的事情，我们就把这个语言中的函数称为一等公民。例如，字符串在几乎所有编程语言中都是一等公民，字符串可以做为函数参数，字符串可以作为函数返回值，字符串也可以赋值给变量。对于各种编程语言来说，函数就不一定是一等公民了，比如 Java 8 之前的版本。
•  对于 JavaScript 来说，函数可以赋值给变量，也可以作为函数参数，还可以作为函数返回值，因此 JavaScript 中函数是一等公民。

动态作用域与静态作用域

•  如果一门语言的作用域是静态作用域，那么符号之间的引用关系能够根据程序代码在编译时就确定清楚，在运行时不会变。某个函数是在哪声明的，就具有它所在位置的作用域。它能够访问哪些变量，那么就跟这些变量绑定了，在运行时就一直能访问这些变量。即静态作用域可以由程序代码决定，在编译时就能完全确定。大多数语言都是静态作用域的。
•  动态作用域（Dynamic Scope）。也就是说，变量引用跟变量声明不是在编译时就绑定死了的。在运行时，它是在运行环境中动态地找一个相同名称的变量。在 macOS 或 Linux 中用的 bash 脚本语言，就是动态作用域的。

闭包的三个基础特性

•  JavaScript 语言允许在函数内部定义新的函数
•  可以在内部函数中访问父函数中定义的变量
•  因为 JavaScript 中的函数是一等公民，所以函数可以作为另外一个函数的返回值 

 
 
 
 
  
  
  
  
// 闭包（静态作用域，一等公民，调用栈的矛盾体） 
  
  
  
  
 
  
  
  
  
function foo() {  
  
  
  
  
  var d = 20;  
  
  
  
  
  return function inner(a, b) {  
  
  
  
  
    const c = a + b + d;  
  
  
  
  
    return c;  
  
  
  
  
  };  
  
  
  
  
}  
  
  
  
  
const f = foo(); 
 
 
 

关于闭包，可参考我以前的一篇文章，在此不再赘述，在此主要谈下闭包给 Chrome V8 带来的问题及其解决策略。

惰性解析  

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

• 在编译 JavaScript 代码的过程中，V8 并不会一次性将所有的 JavaScript 解析为中间代码，这主要是基于以下两点：
  •  首先，如果一次解析和编译所有的 JavaScript 代码，过多的代码会增加编译时间，这会严重影响到首次执行 JavaScript 代码的速度，让用户感觉到卡顿。因为有时候一个页面的 JavaScript 代码很大，如果要将所有的代码一次性解析编译完成，那么会大大增加用户的等待时间；
  • 其次，解析完成的字节码和编译之后的机器代码都会存放在内存中，如果一次性解析和编译所有 JavaScript 代码，那么这些中间代码和机器代码将会一直占用内存。
• 基于以上的原因，所有主流的 JavaScript 虚拟机都实现了惰性解析。
• 闭包给惰性解析带来的问题：上文的 d 不能随着 foo 函数的执行上下文被销毁掉。

预解析器

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

•  判断当前函数是不是存在一些语法上的错误，发现了语法错误，那么就会向 V8 抛出语法错误；
•  检查函数内部是否引用了外部变量，如果引用了外部的变量，预解析器会将栈中的变量复制到堆中，在下次执行到该函数的时候，直接使用堆中的引用，这样就解决了闭包所带来的问题。

V8 内部是如何存储对象的：快属性和慢属性

下面的代码会输出什么：

 
 
 
 
  
  
  
  
// test.js  
  
  
  
  
function Foo() {  
  
  
  
  
  this[200] = 'test-200';  
  
  
  
  
  this[1] = 'test-1';  
  
  
  
  
  this[100] = 'test-100';  
  
  
  
  
  this['B'] = 'bar-B';  
  
  
  
  
  this[50] = 'test-50';  
  
  
  
  
  this[9] = 'test-9';  
  
  
  
  
  this[8] = 'test-8';  
  
  
  
  
  this[3] = 'test-3';  
  
  
  
  
  this[5] = 'test-5';  
  
  
  
  
  this['D'] = 'bar-D';  
  
  
  
  
  this['C'] = 'bar-C';  
  
  
  
  
}  
  
  
  
  
var bar = new Foo();   
  
  
  
  
for (key in bar) {  
  
  
  
  
  console.log(`index:${key}  value:${bar[key]}`);  
  
  
  
  
}  
  
  
  
  
//输出：  
  
  
  
  
// index:1  value:test-1  
  
  
  
  
// index:3  value:test-3  
  
  
  
  
// index:5  value:test-5  
  
  
  
  
// index:8  value:test-8  
  
  
  
  
// index:9  value:test-9  
  
  
  
  
// index:50  value:test-50  
  
  
  
  
// index:100  value:test-100  
  
  
  
  
// index:200  value:test-200  
  
  
  
  
// index:B  value:bar-B  
  
  
  
  
// index:D  value:bar-D  
  
  
  
  
// index:C  value:bar-C 
 
 
 

在ECMAScript 规范中定义了数字属性应该按照索引值大小升序排列，字符串属性根据创建时的顺序升序排列。在这里我们把对象中的数字属性称为排序属性，在 V8 中被称为 elements，字符串属性就被称为常规属性，在 V8 中被称为 properties。在 V8 内部，为了有效地提升存储和访问这两种属性的性能，分别使用了两个线性数据结构来分别保存排序属性和常规属性。同时 v8 将部分常规属性直接存储到对象本身，我们把这称为对象内属性 (in-object properties)，不过对象内属性的数量是固定的，默认是 10 个。

 
 
 
 
  
  
  
  
function Foo(property_num, element_num) {  
  
  
  
  
  //添加可索引属性  
  
  
  
  
  for (let i = 0; i < element_num; i++) {  
  
  
  
  
    this[i] = `element${i}`;  
  
  
  
  
  }  
  
  
  
  
  //添加常规属性  
  
  
  
  
  for (let i = 0; i < property_num; i++) {  
  
  
  
  
    let ppt = `property${i}`;  
  
  
  
  
    this[ppt] = ppt;  
  
  
  
  
  }  
  
  
  
  
}  
  
  
  
  
var bar = new Foo(10, 10); 
 
 
 

可以通过 Chrome 开发者工具的 Memory 标签，捕获查看当前的内存快照。通过增大第一个参数来查看存储变化。

我们将保存在线性数据结构中的属性称之为“快属性”，因为线性数据结构中只需要通过索引即可以访问到属性，虽然访问线性结构的速度快，但是如果从线性结构中添加或者删除大量的属性时，则执行效率会非常低，这主要因为会产生大量时间和内存开销。因此，如果一个对象的属性过多时，V8 就会采取另外一种存储策略，那就是“慢属性”策略，但慢属性的对象内部会有独立的非线性数据结构 (字典) 作为属性存储容器。所有的属性元信息不再是线性存储的，而是直接保存在属性字典中。

v8 属性存储：

总结：  

因为 JavaScript 中的对象是由一组组属性和值组成的，所以最简单的方式是使用一个字典来保存属性和值，但是由于字典是非线性结构，所以如果使用字典，读取效率会大大降低。为了提升查找效率，V8 在对象中添加了两个隐藏属性，排序属性和常规属性，element 属性指向了 elements 对象，在 elements 对象中，会按照顺序存放排序属性。properties 属性则指向了 properties 对象，在 properties 对象中，会按照创建时的顺序保存常规属性。  

通过引入这两个属性，加速了 V8 查找属性的速度，为了更加进一步提升查找效率，V8 还实现了内置内属性的策略，当常规属性少于一定数量时，V8 就会将这些常规属性直接写进对象中，这样又节省了一个中间步骤。  

但是如果对象中的属性过多时，或者存在反复添加或者删除属性的操作，那么 V8 就会将线性的存储模式降级为非线性的字典存储模式，这样虽然降低了查找速度，但是却提升了修改对象的属性的速度。

堆空间和栈空间

栈空间

•  现代语言都是基于函数的，每个函数在执行过程中，都有自己的生命周期和作用域，当函数执行结束时，其作用域也会被销毁，因此，我们会使用栈这种数据结构来管理函数的调用过程，我们也把管理函数调用过程的栈结构称之为调用栈。
•  栈空间主要是用来管理 JavaScript 函数调用的，栈是内存中连续的一块空间，同时栈结构是“先进后出”的策略。在函数调用过程中，涉及到上下文相关的内容都会存放在栈上，比如原生类型、引用到的对象的地址、函数的执行状态、this 值等都会存在在栈上。当一个函数执行结束，那么该函数的执行上下文便会被销毁掉。
•  栈空间的最大的特点是空间连续，所以在栈中每个元素的地址都是固定的，因此栈空间的查找效率非常高，但是通常在内存中，很难分配到一块很大的连续空间，因此，V8 对栈空间的大小做了限制，如果函数调用层过深，那么 V8 就有可能抛出栈溢出的错误。
•  栈的优势和缺点：
  • 栈的结构非常适合函数调用过程。
  • 在栈上分配资源和销毁资源的速度非常快，这主要归结于栈空间是连续的，分配空间和销毁空间只需要移动下指针就可以了。
  • 虽然操作速度非常快，但是栈也是有缺点的，其中最大的缺点也是它的优点所造成的，那就是栈是连续的，所以要想在内存中分配一块连续的大空间是非常难的，因此栈空间是有限的。     

 
 
 
 
  
  
  
  
// 栈溢出  
  
  
  
  
      function factorial(n) {  
  
  
  
  
        if (n === 1) {  
  
  
  
  
          return 1;  
  
  
  
  
        }  
  
  
  
  
        return n * factorial(n - 1);  
  
  
  
  
      }  
  
  
  
  
      console.log(factorial(50000)); 
 
 
 

堆空间

•  堆空间是一种树形的存储结构，用来存储对象类型的离散的数据，JavaScript 中除了原生类型的数据，其他的都是对象类型，诸如函数、数组，在浏览器中还有 window 对象、document 对象等，这些都是存在堆空间的。
•  宿主在启动 V8 的过程中，会同时创建堆空间和栈空间，再继续往下执行，产生的新数据都会存放在这两个空间中。

继承

继承就是一个对象可以访问另外一个对象中的属性和方法，在 JavaScript 中，我们通过原型和原型链的方式来实现了继承特性。

JavaScript 的每个对象都包含了一个隐藏属性 __proto__ ，我们就把该隐藏属性 __proto__ 称之为该对象的原型 (prototype)，__proto__ 指向了内存中的另外一个对象，我们就把 __proto__ 指向的对象称为该对象的原型对象，那么该对象就可以直接访问其原型对象的方法或者属性。  

JavaScript 中的继承非常简洁，就是每个对象都有一个原型属性，该属性指向了原型对象，查找属性的时候，JavaScript 虚拟机会沿着原型一层一层向上查找，直至找到正确的属性。

隐藏属性__proto__

 
 
 
 
  
  
  
  
var animal = {  
  
  
  
  
  type: 'Default',  
  
  
  
  
  color: 'Default',  
  
  
  
  
  getInfo: function () {  
  
  
  
  
    return `Type is: ${this.type}，color is ${this.color}.`;  
  
  
  
  
  },  
  
  
  
  
};  
  
  
  
  
var dog = {  
  
  
  
  
  type: 'Dog',  
  
  
  
  
  color: 'Black',  
  
  
  
  
}; 
 
 
 

利用__proto__实现继承：

 
 
 
 
  
  
  
  
dog.__proto__ = animal;  
  
  
  
  
dog.getInfo(); 
 
 
 

通常隐藏属性是不能使用 JavaScript 来直接与之交互的。虽然现代浏览器都开了一个口子，让 JavaScript 可以访问隐藏属性 __proto__，但是在实际项目中，我们不应该直接通过 __proto__ 来访问或者修改该属性，其主要原因有两个：

•  首先，这是隐藏属性，并不是标准定义的;
•  其次，使用该属性会造成严重的性能问题。因为 JavaScript 通过隐藏类优化了很多原有的对象结构，所以通过直接修改__proto__会直接破坏现有已经优化的结构，触发 V8 重构该对象的隐藏类！

构造函数是怎么创建对象的？ 

在 JavaScript 中，使用 new 加上构造函数的这种组合来创建对象和实现对象的继承。不过使用这种方式隐含的语义过于隐晦。其实是 JavaScript 为了吸引 Java 程序员、在语法层面去蹭 Java 热点，所以就被硬生生地强制加入了非常不协调的关键字 new。

 
 
 
 
  
  
  
  
function DogFactory(type, color) {  
  
  
  
  
  this.type = type;  
  
  
  
  
  this.color = color;  
  
  
  
  
}  
  
  
  
  
var dog = new DogFactory('Dog', 'Black'); 
 
 
 

其实当 V8 执行上面这段代码时，V8 在背后悄悄地做了以下几件事情：

 
 
 
 
  
  
  
  
var dog = {};  
  
  
  
  
dog.__proto__ = DogFactory.prototype;  
  
  
  
  
DogFactory.call(dog, 'Dog', 'Black'); 
 
 
 

机器码、字节码

V8 为什么要引入字节码

•  早期的 V8 为了提升代码的执行速度，直接将 JavaScript 源代码编译成了没有优化的二进制机器代码，如果某一段二进制代码执行频率过高，那么 V8 会将其标记为热点代码，热点代码会被优化编译器优化，优化后的机器代码执行效率更高。
•  随着移动设备的普及，V8 团队逐渐发现将 JavaScript 源码直接编译成二进制代码存在两个致命的问题：
  • 时间问题：编译时间过久，影响代码启动速度；
  • 空间问题：缓存编译后的二进制代码占用更多的内存。
•  这两个问题无疑会阻碍 V8 在移动设备上的普及，于是 V8 团队大规模重构代码，引入了中间的字节码。字节码的优势有如下三点：
  
  •  解决启动问题：生成字节码的时间很短；
  •  解决空间问题：字节码虽然占用的空间比原始的 JavaScript 多，但是相较于机器代码，字节码还是小了太多，缓存字节码会大大降低内存的使用。
  •  代码架构清晰：采用字节码，可以简化程序的复杂度，使得 V8 移植到不同的 CPU 架构平台更加容易。
•  Bytecode 某种程度上就是汇编语言，只是它没有对应特定的 CPU，或者说它对应的是虚拟的 CPU。这样的话，生成 Bytecode 时简单很多，无需为不同的 CPU 生产不同的代码。要知道，V8 支持 9 种不同的 CPU，引入一个中间层 Bytecode，可以简化 V8 的编译流程，提高可扩展性。
•  如果我们在不同硬件上去生成 Bytecode，会发现生成代码的指令是一样的。

如何查看字节码

 
 
 
 
  
  
  
  
// test.js  
  
  
  
  
function add(x, y) {  
  
  
  
  
  var z = x + y;  
  
  
  
  
  return z; 
  
  
  
  
 }  
  
  
  
  
console.log(add(1, 2)); 
 
 
 

运行./d8 ./test.js --print-bytecode:

 
 
 
 
  
  
  
  
[generated bytecode for function: add (0x01000824fe59 )]  
  
  
  
  
Parameter count 3 #三个参数，包括了显式地传入的 x 和 y，还有一个隐式地传入的 this  
  
  
  
  
Register count 1  
  
  
  
  
Frame size 8  
  
  
  
  
         0x10008250026 @    0 : 25 02             Ldar a1 #将a1寄存器中的值加载到累加器中，LoaD Accumulator from Register  
  
  
  
  
         0x10008250028 @    2 : 34 03 00          Add a0, [0]  
  
  
  
  
         0x1000825002b @    5 : 26 fb             Star r0 #Store Accumulator to Register，把累加器中的值保存到r0寄存器中  
  
  
  
  
         0x1000825002d @    7 : aa                Return  #结束当前函数的执行，并将控制权传回给调用方  
  
  
  
  
Constant pool (size = 0)  
  
  
  
  
Handler Table (size = 0)  
  
  
  
  
Source Position Table (size = 0)  
  
  
  
  
3 
 
 
 

常用字节码指令：

•  Ldar：表示将寄存器中的值加载到累加器中，你可以把它理解为 LoaD Accumulator from Register，就是把某个寄存器中的值，加载到累加器中。
•  Star：表示 Store Accumulator Register， 你可以把它理解为 Store Accumulator to Register，就是把累加器中的值保存到某个寄存器中
•  Add：Add a0, [0]是从 a0 寄存器加载值并将其与累加器中的值相加，然后将结果再次放入累加器。

          add a0 后面的[0]称之为 feedback vector slot，又叫反馈向量槽，它是一个数组，解释器将解释执行过程中的一些数据类型的分析信息都保存在这个反馈向量槽中了，目的是为了给 TurboFan 优化编译器提供优化信息，很多字节码都会为反馈向量槽提供运行时信息。

•  LdaSmi：将小整数（Smi）加载到累加器寄存器中
•  Return：结束当前函数的执行，并将控制权传回给调用方。返回的值是累加器中的值。

隐藏类和内联缓存

JavaScript 是一门动态语言，其执行效率要低于静态语言，V8 为了提升 JavaScript 的执行速度，借鉴了很多静态语言的特性，比如实现了 JIT 机制，为了提升对象的属性访问速度而引入了隐藏类，为了加速运算而引入了内联缓存。

为什么静态语言的效率更高?  

静态语言中，如 C++ 在声明一个对象之前需要定义该对象的结构，代码在执行之前需要先被编译，编译的时候，每个对象的形状都是固定的，也就是说，在代码的执行过程中是无法被改变的。可以直接通过偏移量查询来查询对象的属性值，这也就是静态语言的执行效率高的一个原因。  

JavaScript 在运行时，对象的属性是可以被修改的，所以当 V8 使用了一个对象时，比如使用了 obj.x 的时候，它并不知道该对象中是否有 x，也不知道 x 相对于对象的偏移量是多少，也就是说 V8 并不知道该对象的具体的形状。那么，当在 JavaScript 中要查询对象 obj 中的 x 属性时，V8 会按照具体的规则一步一步来查询，这个过程非常的慢且耗时。

将静态的特性引入到 V8

•  V8 采用的一个思路就是将 JavaScript 中的对象静态化，也就是 V8 在运行 JavaScript 的过程中，会假设 JavaScript 中的对象是静态的。
•  具体地讲，V8 对每个对象做如下两点假设：
  •  对象创建好了之后就不会添加新的属性；
  •   对象创建好了之后也不会删除属性。
•  符合这两个假设之后，V8 就可以对 JavaScript 中的对象做深度优化了。V8 会为每个对象创建一个隐藏类，对象的隐藏类中记录了该对象一些基础的布局信息，包括以下两点：
  •  对象中所包含的所有的属性；
  •  每个属性相对于对象的偏移量。
•  有了隐藏类之后，那么当 V8 访问某个对象中的某个属性时，就会先去隐藏类中查找该属性相对于它的对象的偏移量，有了偏移量和属性类型，V8 就可以直接去内存中取出对应的属性值，而不需要经历一系列的查找过程，那么这就大大提升了 V8 查找对象的效率。
•  在 V8 中，把隐藏类又称为 map，每个对象都有一个 map 属性，其值指向内存中的隐藏类；
•  map 描述了对象的内存布局，比如对象都包括了哪些属性，这些数据对应于对象的偏移量是多少。

通过 d8 查看隐藏类

 
 
 
 
  
  
  
  
// test.js  
  
  
  
  
let point1 = { x: 100, y: 200 };  
  
  
  
  
let point2 = { x: 200, y: 300 };  
  
  
  
  
let point3 = { x: 100 };  
  
  
  
  
%DebugPrint(point1);  
  
  
  
  
%DebugPrint(point2);  
  
  
  
  
%DebugPrint(point3);  
 
 
 

 
 
 
 
  
  
  
  
./d8 --allow-natives-syntax ./test.js  
 
 
 

 
 
 
 
  
  
  
  
# ===============  
  
  
  
  
DebugPrint: 0x1ea3080c5bc5: [JS_OBJECT_TYPE]  
  
  
  
  
# V8 为 point1 对象创建的隐藏类  
  
  
  
  
 - map: 0x1ea308284ce9  [FastProperties]  
  
  
  
  
 - prototype: 0x1ea308241395   
  
  
  
  
 - elements: 0x1ea3080406e9  [HOLEY_ELEMENTS]  
  
  
  
  
 - properties: 0x1ea3080406e9  {  
  
  
  
  
    #x: 100 (const data field 0)  
  
  
  
  
    #y: 200 (const data field 1)  
  
  
  
  
 }  
  
  
  
  
0x1ea308284ce9: [Map]  
  
  
  
  
 - type: JS_OBJECT_TYPE  
  
  
  
  
 - instance size: 20  
  
  
  
  
 - inobject properties: 2  
  
  
  
  
 - elements kind: HOLEY_ELEMENTS  
  
  
  
  
 - unused property fields: 0  
  
  
  
  
 - enum length: invalid  
  
  
  
  
 - stable_map  
  
  
  
  
 - back pointer: 0x1ea308284cc1   
  
  
  
  
 - prototype_validity cell: 0x1ea3081c0451   
  
  
  
  
 - instance descriptors (own) #2: 0x1ea3080c5bf5   
  
  
  
  
 - prototype: 0x1ea308241395   
  
  
  
  
 - constructor: 0x1ea3082413b1   
  
  
  
  
 - dependent code: 0x1ea3080401ed   
  
  
  
  
 - construction counter: 0  
  
  
  
  
# ===============  
  
  
  
  
DebugPrint: 0x1ea3080c5c1d: [JS_OBJECT_TYPE]  
  
  
  
  
# V8 为 point2 对象创建的隐藏类  
  
  
  
  
 - map: 0x1ea308284ce9  [FastProperties]  
  
  
  
  
 - prototype: 0x1ea308241395   
  
  
  
  
 - elements: 0x1ea3080406e9  [HOLEY_ELEMENTS]  
  
  
  
  
 - properties: 0x1ea3080406e9  {  
  
  
  
  
    #x: 200 (const data field 0)  
  
  
  
  
    #y: 300 (const data field 1)  
  
  
  
  
 }  
  
  
  
  
0x1ea308284ce9: [Map]  
  
  
  
  
 - type: JS_OBJECT_TYPE  
  
  
  
  
 - instance size: 20  
  
  
  
  
 - inobject properties: 2  
  
  
  
  
 - elements kind: HOLEY_ELEMENTS  
  
  
  
  
 - unused property fields: 0  
  
  
  
  
 - enum length: invalid  
  
  
  
  
 - stable_map  
  
  
  
  
 - back pointer: 0x1ea308284cc1   
  
  
  
  
 - prototype_validity cell: 0x1ea3081c0451   
  
  
  
  
 - instance descriptors (own) #2: 0x1ea3080c5bf5   
  
  
  
  
 - prototype: 0x1ea308241395   
  
  
  
  
 - constructor: 0x1ea3082413b1   
  
  
  
  
 - dependent code: 0x1ea3080401ed   
  
  
  
  
 - construction counter: 0  
  
  
  
  
# ===============  
  
  
  
  
DebugPrint: 0x1ea3080c5c31: [JS_OBJECT_TYPE]  
  
  
  
  
# V8 为 point3 对象创建的隐藏类  
  
  
  
  
 - map: 0x1ea308284d39  [FastProperties]  
  
  
  
  
 - prototype: 0x1ea308241395   
  
  
  
  
 - elements: 0x1ea3080406e9  [HOLEY_ELEMENTS]  
  
  
  
  
 - properties: 0x1ea3080406e9  {  
  
  
  
  
    #x: 100 (const data field 0)  
  
  
  
  
 }  
  
  
  
  
0x1ea308284d39: [Map]  
  
  
  
  
 - type: JS_OBJECT_TYPE  
  
  
  
  
 - instance size: 16  
  
  
  
  
 - inobject properties: 1  
  
  
  
  
 - elements kind: HOLEY_ELEMENTS  
  
  
  
  
 - unused property fields: 0  
  
  
  
  
 - enum length: invalid  
  
  
  
  
 - stable_map  
  
  
  
  
 - back pointer: 0x1ea308284d11   
  
  
  
  
 - prototype_validity cell: 0x1ea3081c0451   
  
  
  
  
 - instance descriptors (own) #1: 0x1ea3080c5c41   
  
  
  
  
 - prototype: 0x1ea308241395   
  
  
  
  
 - constructor: 0x1ea3082413b1   
  
  
  
  
 - dependent code: 0x1ea3080401ed   
  
  
  
  
 - construction counter: 0 
 
 
 

多个对象共用一个隐藏类

•  在 V8 中，每个对象都有一个 map 属性，该属性值指向该对象的隐藏类。不过如果两个对象的形状是相同的，V8 就会为其复用同一个隐藏类，这样有两个好处：
  •  减少隐藏类的创建次数，也间接加速了代码的执行速度；
  •  减少了隐藏类的存储空间。
•  那么，什么情况下两个对象的形状是相同的，要满足以下两点：
  •  相同的属性名称；
  •  相等的属性个数。

重新构建隐藏类

•  给一个对象添加新的属性，删除新的属性，或者改变某个属性的数据类型都会改变这个对象的形状，那么势必也就会触发 V8 为改变形状后的对象重建新的隐藏类。 

 
 
 
 
  
  
  
  
// test.js  
  
  
  
  
let point = {};  
  
  
  
  
%DebugPrint(point);  
  
  
  
  
point.x = 100;  
  
  
  
  
%DebugPrint(point);  
  
  
  
  
point.y = 200;  
  
  
  
  
%DebugPrint(point);  
 
 
 

 
 
 
 
  
  
  
  
# ./d8 --allow-natives-syntax ./test.js  
  
  
  
  
DebugPrint: 0x32c7080c5b2d: [JS_OBJECT_TYPE]  
  
  
  
  
 - map: 0x32c7082802d9  [FastProperties]  
  
  
  
  
 ...  
  
  
  
  
DebugPrint: 0x32c7080c5b2d: [JS_OBJECT_TYPE]  
  
  
  
  
 - map: 0x32c708284cc1  [FastProperties]  
  
  
  
  
 ...  
  
  
  
  
DebugPrint: 0x32c7080c5b2d: [JS_OBJECT_TYPE]  
  
  
  
  
 - map: 0x32c708284ce9  [FastProperties]              

                当前文章：浏览器是如何工作的：Chrome V8让你更懂JavaScript
                

                网站路径：http://www.shufengxianlan.com/qtweb/news1/459901.html
            
            

                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
            

                广告
                
            
            

                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联