V8引擎是如何工作?

2018-11-09 admin

V8是google开发的JavaScript引擎, 它是开源的 ,而且是用C++编写的。它是用于客户端(Google Chrome)和服务器端(node.js)JavaScript应用程序。

V8最初旨在提高Web浏览器中JavaScript执行的性能。为了提升速度,V8将JavaScript代码转换为更高效的机器语言,而不是使用解释器。它通过实现 JIT(即时编译器)将JavaScript代码编译成机器代码,就像许多现代JavaScript引擎(如SpiderMonkey或Rhino(Mozilla))所做的那样。与V8的主要区别在于它不会产生字节码或任何中间代码。

本文的目的是展示和理解 V8如何工作,以便为客户端或服务器端应用程序生成优化的代码。如果您已经在问自己“我应该关心JavaScript性能吗?”那么我将回答Daniel Clifford(技术主管和V8团队经理)的一句话:“这不仅仅是让您当前的应用程序运行得更快,而是关于实现你过去从未做过的事情“。

隐藏的class

JavaScript是一种基于原型的语言:no classes,并且使用克隆过程创建对象(原型链)。JavaScript也是动态类型的:类型和类型信息不是显式的,属性可以动态添加到对象中或从中删除。有效访问类型和属性是V8的首要挑战。而不是使用类似字典的数据结构来存储对象属性和进行动态查找来解析属性位置(就像大多数JavaScript引擎一样),V8在运行时创建隐藏类,以便具有内部表示类型系统和改善属性访问时间。

让我们有一个Point函数和两个Point对象的创建:

https://p1.ssl.qhimg.com/t016… clipboard.png

如果布局相同(这里是这种情况),则p和q属于由V8创建的相同隐藏类。这突出了使用隐藏类的另一个优点:它允许V8对属性相同的对象进行分组。这里p和q有一定的代码优化。

现在,让我们假设我们想在我们的q对象之后添加一个z属性,就在它声明之后(对于动态类型语言来说这是完全没问题的)。

V8将如何处理这种情况?事实上,每当构造函数声明一个属性并跟踪隐藏类的变化时,V8 就会创建一个新的隐藏类。为什么?因为如果创建了两个对象(p和q)并且在创建后将成员添加到第二个对象(q),则V8需要保留最后创建的隐藏类(对于第一个对象p)并创建一个新对象(对于第二个对象q)与新成员。

https://p4.ssl.qhimg.com/t01c… clipboard.png

每次创建一个新的隐藏类时,前一个隐藏类都会更新一个类转换,指示必须使用哪个隐藏类。

因此:

  • 初始化构造函数中的所有对象成员(因此实例稍后不会更改类型)
  • 始终以相同的顺序初始化对象成员

代码优化

因为V8为每个属性创建一个新的隐藏类,所以应该将隐藏的类创建保持在最低限度。为此,请尽量避免在创建对象后添加属性,并始终以相同的顺序初始化对象成员(以避免创建不同的隐藏类树)。

[Update ]另一个技巧:单态操作是仅对具有相同隐藏类的对象起作用的操作。当我们调用一个函数时,V8会创建一个隐藏类。如果我们用不同的参数类型再次调用它,V8需要创建另一个隐藏类:首选单态代码到多态代码

有关V8如何优化JavaScript代码的更多示例

标记值

为了有效地表示数字和JavaScript对象,V8表示具有 32位值。它使用一个位来知道它是一个对象(flag = 1)还是一个整数(flag = 0),这里称为SMall Integer或 SMI ,因为它的31位。然后,如果数值大于31位,则V8将对该数字进行选择,将其变为双精度并创建一个新对象以将数字放入其中。

代码优化:尽可能使用31位带符号数字,以避免对JavaScript对象进行消耗性能的封装操作。

数组

V8使用两种不同的方法来处理数组:

  • 快速元素:专为那些键组非常紧凑的阵列而设计。它们具有线性存储缓冲区,可以非常有效地访问它。
  • 字典元素:专为稀疏数组而设计,它们内部没有所有元素。它实际上是一个哈希表,它的性能消耗比“快速元素”更昂贵。

代码优化:确保V8使用“快速元素”来处理数组,换句话说,避免使用稀疏数组。另外,尽量避免预先分配大型数组。最后,不要删除数组中的元素:它使键集稀疏。

 a = new Array();
for (var b = 0; b < 10; b++) {
  a[0] |= b;  // Oh no!
}
//vs.
a = new Array();
a[0] = 0;
for (var b = 0; b < 10; b++) {
  a[0] |= b;  // Much better! 2x faster.
}

此外,双精度阵列更快 - 数组的隐藏类跟踪元素类型,并且仅包含双精度的数组是未装箱的(这会导致隐藏的类更改)。但是,由于装箱和拆箱,粗心操作阵列会导致额外的工作 - 例如

var a = new Array();
a[0] = 77;   // Allocates
a[1] = 88;
a[2] = 0.5;   // Allocates, converts
a[3] = true; // Allocates, converts

效率低于:

var a = [77, 88, 0.5, true];

V8如何编译JavaScript代码?

V8有两个编译器!

一个“完整”编译器,可以为任何JavaScript生成良好的代码。此编译器的目标是快速生成代码。为了实现其目标,它不进行任何类型分析,也不了解类型。相反,它使用内联缓存或“IC”策略来在程序运行时优化有关类型的知识。IC效率非常高,速度可提高20倍。

优化编译器,可为大多数JavaScript语言生成出色的代码。它稍后会重新编译热门功能。优化编译器从内联缓存中获取类型,并决定如何更好地优化代码。但是,某些语言功能尚不支持,例如try / catch块。(try / catch块的解决方法是在函数中编写“非稳定”代码并在try块中调用函数)

代码优化:V8还支持去优化:优化编译器从内联缓存中对不同类型做出假设,如果这些假设无效则会进行去优化。例如,如果生成的隐藏类不是预期的类,则V8会抛弃优化的代码并返回到完整编译器以从内联缓存中再次获取类型。此过程很慢,应该通过在优化后尝试不更改功能来避免。

资源

博客评论由Disqus提供

译者注: 关于本文中提到的一些知识点,做一些简单的只是扩展,希望对你们理解本文有一些帮助; 1、 "JavaScript has no classes" 虽然JavaScript是面向对象的语言,但它不是基于类的语言 - 它是基于原型的语言。 在js和java或其他“基于类”的编程语言中类的工作方式之间存在一些深刻的差异。 相关讨论 2、快速元素和字典元素 快速或字典元素:元素的第二个主要区别是它们是快速还是字典模式。快速元素是简单的VM内部数组,其中属性索引映射到元素存储中的索引。但是,这种简单的表示对于非常大的稀疏/多孔数组而言是相当浪费的,其中只占用很少的条目。在这种情况下,我们使用基于字典的表示来节省内存,但代价是访问速度稍慢:

const sparseArray = [];
sparseArray[9999] = 'foo'; // Creates an array with dictionary elements.
sparseArray.length
// 10000
sparseArray[0]
// undefined

在这个例子中,分配一个包含10k条目的完整数组会相当浪费。相反,V8会创建一个字典来存储键值描述符三元组。在这种情况下,密钥是’9999’,并且使用值’foo’和默认描述符。鉴于我们没有办法在HiddenClass上存储描述符详细信息,只要您使用自定义描述符定义索引属性,V8就会转向减慢元素:

const array = [];
Object.defineProperty(array, 0, {value: 'fixed' configurable: false});
console.log(array[0]);      // Prints 'fixed'.
array[0] = 'other value';   // Cannot override index 0.
console.log(array[0]);      // Still prints 'fixed'.

引用文档

原文链接:https://segmentfault.com/a/1190000016966945

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-45001.html

文章标题:V8引擎是如何工作?

相关文章
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
国内外html5游戏引擎排行
一个好的HTML5游戏引擎,能够大大简化游戏的开发实现。 排名列表: Construct 2 ImpactJS EaselJS pixi.js Phaser GameMaker Three.js PlayCanvas Turbulenz ...
2015-11-12
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
回到顶部