从 V8 优化看高效 JavaScript

简介: 从 V8 优化看高效 JavaScript

理解 JavaScript 是如何工作的对于编写高效的 JS 大有帮助。


V8 执行 JS 分为三个阶段:

  • 源代码转换为 AST 抽象语法树。
  • 语法树转换为字节码:这个过程由 V8 的 Ignition 完成,2017年之前是没有的。
  • 字节码编译成机器码:由 V8 的编译器 TurboFan 来完成。


第一个阶段并不是文本的讨论范围,第二三阶段对于编写优化 JS 有直接影响。


实际上第二三阶段是紧耦合的,它们都在 just-in-time( JIT )内运作。为了理解 JIT ,我们先回顾下源代码转换为机器码的两种方法:1、解释器

解释器逐行转换和执行代码,其优点是易于实现和理解、及时反馈、更宽泛的编程环境,缺点也非常明显,那就是速度慢,慢的原因在于(1)反复解释的开销和(2)无法优化程序的各个部分。

换句话说,解释器在处理不同的代码段时无法识别重复的工作量。如果你通过解释器运行相同的代码 100 次,那么解释器将会翻译并执行相同的代码 100 次,其中不必要的重新翻译了 99 次。

解释器很简单、启动快速,但执行速度慢。

2、编译器编译器在执行之前翻译所有的源代码。编译器更加复杂,但是可以进行全局优化(例如,共享重复代码),其执行速度也更快。

编译器更复杂、启动慢,但执行速度更快。

JIT 的作用就是尽可能结合解释器和编译器的优点,以使翻译代码和执行都能快速。

基本思想是尽可能避免重新翻译。首先,探测器通过解释器运行代码,在执行期间,探测器会追踪代码段并将其会被划分为 warm(运行少数几次) 和 hot(运行重复多次)。

JIT 把 warm 代码段直接丢给基准编译器,尽可能重用已编译的代码。

JIT 把 hot 代码段丢给优化编译器,其根据解释器收集来的信息(1)作出假设,(2)基于假设(比如,对象属性始终以特定顺序出现)进行优化。然而,一旦假设不成立,优化编译器就会进行 deoptimization 去优化,就是丢弃优化的代码。


优化和去优化的周期是昂贵的。由于需要存储优化过的机器码和探测器的信息,JIT 引入了额外的内存成本。这种成本激发了 V8 的解释器 Ignition 。


Ignition 将 AST 转换为字节码,字节码序列被执行,其反馈信息被 inline caches 内联高速缓存。 反馈信息被用于(1)Ignition 随后的解释,和(2)TurboFan 推测性优化。TurboFan 基于反馈推测性的优化将字节码转换为机器码。


...


如何优化你的 JavaScript


1、在构造函数中声明对象属性


改变对象的属性将会导致新的隐藏类:本来 p1 和 p2  应该使用的是同一个隐藏类,但是由于 p1.z 的原因将会导致它们使用不同的隐藏类,这将导致 TurboFan 的去优化,这是应该避免的。


2、保持对象属性排序不变


改变对象属性的排序也将会导致新的隐藏类:


保持对象属性的排序有利于重用相同的隐藏类,效率更高。


3、注意函数的参数类型


函数参数类型的更改也将会导致去优化和重新优化:比如这个函数,由于参数类型的易变将会导致编译器无法优化。


4、在 script 域声明类


不要在函数范围内定义类:

这个函数每被调用一次,一个新的原型就被会创建,每个新的原型都会对应一个新的对象 shape ,这也是无法优化的。


5、使用 for ... in


for ... in 循环是 V8 引擎特别优化过的,可以快 4 到 6 倍。


6、不相关的字符不会影响性能


早期使用的是函数的字节计数来确定是否内联函数,但是现在使用的是 AST 的节点数量来确定函数的大小。这就是说,诸如空格、注释、变量名称长度、函数签名之类的不相关字符不会影响函数的性能。


7、Try / catch / finally 并不是毁灭性的


Try 以前会导致昂贵的优化和去优化循环,但是现在并不会导致明显的性能影响。

目录
相关文章
|
5天前
|
存储 JavaScript 前端开发
JavaScript垃圾回收机制与优化
【10月更文挑战第21】JavaScript垃圾回收机制与优化
15 5
|
2月前
|
存储 缓存 JavaScript
JavaScript 中数组方法的常见优化技巧
JavaScript 中数组方法的常见优化技巧
|
2月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
119 6
|
3月前
|
JSON JavaScript 前端开发
震惊!JS如何悄无声息追踪你的每一步?揭秘页面访问与关闭的超级上报大法,让数据说话,优化体验不再难!
【8月更文挑战第4天】在Web开发中,跟踪用户行为对提升体验与留存至关重要。本文以在线学习平台为例,介绍如何用JavaScript监听页面访问及关闭,并上报数据。通过`window.onload`监测页面加载,记录用户访问;利用`navigator.sendBeacon`在用户离开时发送少量数据至服务器,无需担心请求失败。需注意隐私合规、性能影响及浏览器兼容性。此技术有助于深入理解用户行为,为产品迭代提供依据。
131 8
|
3月前
|
C# 开发者 测试技术
震惊!Xamarin 竟能如此构建跨平台应用程序,代码共享、界面设计与性能优化全攻略大揭秘!
【8月更文挑战第31天】在移动应用开发领域,跨平台工具日益受到青睐。Xamarin 是一款强大的工具,支持使用 C# 开发适用于 iOS、Android 和 Windows 的应用。通过安装 Visual Studio 或 Visual Studio for Mac,并创建 Xamarin 项目,开发者可以利用丰富的功能和工具进行开发。Xamarin 的主要优势在于代码共享,能够显著提高开发效率。
62 0
|
3月前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
74 0
|
3月前
|
JavaScript 前端开发 应用服务中间件
Vue.js项目部署与优化:一场从本地到生产环境的华丽蜕变,见证你的应用如何凤凰涅槃,惊艳上线!
【8月更文挑战第30天】作为一名前端开发者,掌握从本地开发环境到生产环境的迁移至关重要。本文将带你了解如何使用 Vue.js 构建和打包应用,确保其在生产环境中流畅运行。首先,通过 `npm run build` 或 `yarn build` 命令生成生产环境文件;接着,配置服务器(如 Nginx)以支持静态文件服务;最后,通过代码分割、资源压缩、CDN 使用、服务端渲染及缓存策略等手段优化应用性能。跟随本文,你将学会如何让 Vue.js 应用在真实环境中表现优异,为用户提供流畅体验。
51 0
|
3月前
|
缓存 负载均衡 JavaScript
Node.js 服务器性能优化
【8月更文挑战第4天】 Node.js 服务器性能优化
46 1
|
4月前
|
缓存 监控 JavaScript
常见的JS优化方案都有那些
【7月更文挑战第7天】 JavaScript优化包括代码优化(箭头函数、解构赋值、模板字面量、展开运算符、高阶函数)、DOM操作优化(减少操作、事件委托、节流防抖)、异步优化(Promise、Web Workers)、缓存策略(结果缓存、HTTP缓存)、压缩合并以及性能分析和监控。通过这些方法,提升网页性能和用户体验。
29 1
|
4月前
|
数据采集 缓存 JavaScript
JavaScript递归函数的设计与优化
JavaScript递归函数的设计与优化