在过去的几年里，JavaScript高速发展成为了互联网中最热门的高级语言之一，它在性能上的提升以及不断涌现的前沿web技术使其成为HTML5的中坚力量。2008 年 9 月 2 日，V8引擎宣布开源，由于V8引擎在JavaScript性能优化方面做了很大的提升，所以也让他成为了大众喜爱的开源高性能JavaScript引擎，目前被用于谷歌浏览器，安卓浏览器，node.js等大型项目中，并成为了不可或缺的一部分。
说点啥
1、webkit渲染流程
-
如下图：
webkit渲染流程.png
从输入URL抵达用户面前浏览器做了什么
1、解析HTML生成DOM树。
2、解析CSS生成CSSOM规则树。
3、将DOM树与CSSOM规则树合并在一起生成渲染树。
4、遍历渲染树开始布局，计算每个节点的位置大小信息。
5、将渲染树每个节点绘制到屏幕
-
渲染所耗时如图：
网页渲染所耗时.png
-
渲染阶段小结
1、渲染三个阶段： Layout，Paint，Composite Layers
2、修改不同CSS属性会触发不同阶段
3、触发的阶段越前，渲染的代价越高 -
那我们写动画、CSS的时候，如何避免重绘导致页面渲染效率降低呢？（答案在这： https://csstriggers.com/ ）
2、V8引擎的编译器
2.1、V8 5.9版本引擎
在 V8 的5.9版本，V8 引擎使用了这两个编译器（再早期的编译器在这里就不说了）
full-codegen：一个简单的并且非常快的编译器用于将 js 编译成简单但是很慢的机械码
Crankshaft：非常复杂的实时优化编译器，编译高性能的可执行代码
2.2、工作流程
在第一次执行JavaScript代码的时候，V8 利用 full-codegen 编译器直接翻译成机器代码不去进行任何转化，这使它可以更加快速的执行机器代码。在主进程运行一段时间后，还会有一个 Profiler（性能） 线程，这个线程会告诉我们运行时耗费了多少的时间，让 Crankshaft 可以进行一轮的优化，将优化以后的机器码重新覆盖原有机器码。
2.3、为什么被淘汰？
是它是它就是它：https://bugs.chromium.org/p/chromium/issues/detail?id=593477
简单说下这个问题，在首次加载网页时，V8.CompileScript与V8.Parse子进程一起发生，该子进程具有许多V8.PreParse事件，所以V8引擎将网页缓存下来，但是，第二次打开的时候，浏览器去解析缓存中的网页，需要进行一次编译与反编译，造成的后果就是第N次打开页面的耗费时间要比第一次还多，这就是它为什么被淘汰
2.4、V8引擎 5.9之后的编译器（Ignition + Turbofan）
默认启用Ignition + Turbofan（字节码解释器 + JIT即时编译）的第一个版本。
重构重点：
- 减轻机器码占用的内存空间
- 提高代码的启动速度
- 重构V8的代码并降低代码复杂度
3、类型检查与优化回滚
因为V8是基于AST直接生成本地代码，没有经过中间表示层的优化，所以本地代码尚未经过很好的优化。于是，在2010年，V8引入了新的编译器-Crankshaft，它主要针对热点函数进行优化，基于JavaScript源代码开始分析而非本地代码，同时构建Hydroger图并基于此来进行优化分析。
Crankshaft编译器为了性能考虑，通常会做出比较乐观和大胆的预测—代码稳定且变量类型不变，所以可以生成高效的本地代码。但是，鉴于JavaScript的一个弱类型的语言，变量类型也可能在执行的过程中进行改变，鉴于这种情况，V8会将该编译器做的想当然的优化进行回滚，称为优化回滚。
重点概括：
- 使用type feedback 做动态检查
- 一般而言，在编译阶段提前检查
- 在编译之后，使用该类型作为动态类型
- 如果检查失败，（去优化 -> 优化回滚）（deoptimize）
- 去优化之后，可能会使用解释器运行中间码
回滚.png
在这个图片上，可以看在第一次和第二次调用的时候，传入的是整数，这时在内部给a、b默认位整数类型，当第三次传入浮点数时，这个时候触发了优化回滚，将默认类型清除。
4、隐藏类和内联缓存
4.1、隐藏类
由于 JavaScript 是一门动态的编程语言，因此哪怕是在 ES6 及以上版本的规范中有了class 的一个定义，开发者也能非常方便地对一个对象添加或者移除一个属性。
隐藏类就是对这样一套对象体系中的一个黑科技的包装——所有如属性一样的对象会被归为同一个隐藏类。
function aa(a, b) {
this.a = a;
this.b = b;
}
let a1 = new aa();
let b1 = new aa();
// b1.z = 3;
console.log(a1 === b1)； //false
console.log( % HaveSameMap(a1, b1)) // true
function aa(a, b) {
this.a = a;
this.b = b;
}
let a1 = new aa();
let b1 = new aa();
b1.z = 3;
console.log(a1 === b1)； //false
console.log( % HaveSameMap(a1, b1)) // false
- 从这里可以看出，在没有给b1赋新值时，在引擎中认为a1 === b1（% HaveSameMap是浏览器内部方法），当给b1新赋值后，a1 !== b1
4.2、内联缓存
V8 使用了内联缓存的特性来提高属性的访问效率。这些对象在最近的方法调用中被当做传参，然后V8根据这个缓存信息来推断将来什么样类型的对象会再次被当成传参。如果V8能够准确推断出接下来被传入的对象类型，那么它就能绕开获取对象属性的计算步骤，而只是使用先前查找该对象的隐藏类时所存储的信息
5、V8的垃圾回收机制（Garbage Collection）
5.1、新生代算法
在分代的基础上，新生代用的是scavenge算法，再具体实现是用cheney算法，它把内存空间一分为二，每一个叫做semispace，这两个semispace一个处于使用，一个处于闲置，处于使用的叫做From，处于闲置的叫做To，赋值时先分配到From，当开始进行垃圾回收时，还在被使用的变量会被复制到To，否则会被直接释放掉，然后From和To互换位置，在开始下一次垃圾回收机制时，如果还被使用则晋升为老生代，或者占用空间大于25%。
它的缺点是只能使用堆内存的一半，这是一个典型的空间换时间算法，但新生代声明周期较短，恰恰就适合这个算法。
新生代算法.png
5.2、老生代算法
老生代是用了mark-sweep 和 mark-compact算法，再用scavenge算法不合适。一是太多对象需要被赋值，而且还是没有解决空间问题。mark-sweep标记清除法，是将死亡的对象进行标记，然后去清除，但是这样会产生不连续的内存空间。为了解决这一问题，从mark-sweep演变过来一个mark-compact算法，它是将存活的对象移动到一边，然后清除边界外的内存，当CPU空间不足时效率很高。
V8后续还引入了延迟处理，增量处理，并计划引入标记处理。
老生代算法.png
参考资料
- 《深入浅出Node.js》
- 《WebKit技术内幕》
- 认识 V8 引擎
- JavaScript 语法解析、AST、V8、JIT
网友评论