Javascript性能优化【内联缓存】 V8引擎特性

杨周龙 2021-02-23 14:55:27
优化 javascript 性能 缓存 内联


javascript 是单线程、动态类型语言,那么我们在编码时候如何编写性能最优代码呢?下面将讲解 V8引擎的内联优化。利用内联缓存这个特性我们可以编写更加优秀的代码。

什么是内联缓存

引用官方的描述:内联缓存(Inline caching)是部分编程语言的运行时系统采用的优化技术,最早为Smalltalk开发。内联缓存的目标是通过记住以前直接在调用点上方法查询的结果来加快运行时方法绑定的速度。内联缓存对动态类型语言尤为有用,其中大多数(如非全部)方法绑定发生在运行时,因此虚方法表通常无法使用。

  • 我们可以理解为javascript每一次的栈执行遇到调用外部函数、对象时候都产生地址缓存记录,下回执行到这个位置时候直接从缓存中取出对应记录,省去重新查找这一过程从加快程序执行速度。

转换成代码

模拟计算逻辑(伪代码)
为了更好提现出现内联缓存的优化,我们把对象所有方法逻辑为一致。
 let value = 0
const Calculator = {
add1(val) {
value += val
},
add2(val) {
value += val
},
add3(val) {
value += val
},
add4(val) {
value += val
},
add5(val) {
value += val
},
add6(val) {
value += val
},
add7(val) {
value += val
},
add8(val) {
value += val
},
add9(val) {
value += val
},
add10(val) {
value += val
}
}
不实用内联优化策略的代码
 function notOptimization(val, type) {
Calculator[type](val) // 动态执行函数,当前调点无法确定地址
}
const CalculatorKey = Object.keys(Calculator)
console.time('notOptimization')
for(let i = 0; i < 1000000; i ++) {
const key = CalculatorKey[Math.floor(Math.random() * CalculatorKey.length)]
notOptimization(1, key)
}
console.timeEnd('notOptimization')

上面这段代码使用哈希快速查找对应函数,但是放弃内联缓存策略。代码5次执行结果,平均为80ms左右
在这里插入图片描述

使用内联缓存策略代码
 function optimization(val, type) {
if (type === 'add1')
Calculator.add1(val)
else if (type === 'add2')
Calculator.add2(val)
else if (type === 'add3')
Calculator.add3(val)
else if (type === 'add4')
Calculator.add4(val)
else if (type === 'add5')
Calculator.add5(val)
else if (type === 'add6')
Calculator.add6(val)
else if (type === 'add7')
Calculator.add7(val)
else if (type === 'add8')
Calculator.add8(val)
else if (type === 'add9')
Calculator.add9(val)
else
Calculator.add10(val)
}
const CalculatorKey = Object.keys(Calculator)
console.time('optimization')
for(let i = 0; i < 1000000; i ++) {
const key = CalculatorKey[Math.floor(Math.random() * CalculatorKey.length)]
optimization(1, key)
}
console.timeEnd('optimization')

这段代码用了多层if else 进行函数调用(为了提现内联缓存策略的优化,正确应该用switch或数组查找),我们看看执行5次结果,速度为55~50ms
在这里插入图片描述

总结,所以在编码过程我们尽量少使用动态调用运算,但是相对对象属性值获取哈希、数组的方式是远远快于if、switch的
版权声明
本文为[杨周龙]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000039261510

  1. 对前端异常window error捕获的全面总结
  2. A comprehensive summary of front end exception window error capture
  3. 成功解决Problem while trying to mount target]\“. HTTP response code is 400
  4. Problem while trying to mount target] \ ". HTTP response code is 400
  5. 放弃okhttp、httpClient,选择了这个牛逼的神仙工具!贼爽
  6. 前端面试每日 3+1 —— 第679天
  7. How to add elements at the beginning of an array in JS?
  8. Give up okhttp and httpclient and choose this awesome immortal tool! Thief Shuang
  9. Front end interview daily 3 + 1 - day 679
  10. 【2021 第一期】日常开发 26 个常见的 JavaScript 代码优化方案
  11. Daily development of 26 common JavaScript code optimization schemes
  12. 前端的字符串时间如何自动转换为后端Java的Date属性,介绍springMVC中如何解决时间转换问题
  13. How to automatically convert the front-end string time to the back-end Java date attribute, and how to solve the time conversion problem in spring MVC are introduced
  14. 前端面试常考题:JS垃圾回收机制
  15. ReactDOM.render串联渲染链路(一)
  16. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  17. 粗涉Webpack
  18. Frequently asked questions in front end interview: JS garbage collection mechanism
  19. ReactDOM.render Serial rendering link (1)
  20. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  21. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  22. About webpack
  23. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  24. 详解vue静态资源打包中的坑与解决方案
  25. 一篇搞懂TCP、HTTP、Socket、Socket连接池
  26. 字节跳动2021前端技术岗发布+最新内部面试题
  27. Detailed explanation of Vue static resource packaging and Solutions
  28. Understanding TCP, HTTP, socket, socket connection pool
  29. 2008-2021 front end technical post release + latest internal interview questions
  30. 4. Vue基本指令
  31. 4. Vue basic instruction
  32. Java 发起 http 请求
  33. Java initiates HTTP request
  34. 网站由http升级为https图文教程
  35. Upgrade the website from HTTP to HTTPS
  36. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  37. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  38. 混合开发入门 Vue结合Android/iOS开发仿京东项目App
  39. Hybrid development entry Vue combined with Android / IOS to develop app imitating Jingdong project
  40. 无缝对接 Tableau,这家月活跃用户 5000+ 的大型银行如何实现自助式分析?
  41. Are airpods still the strongest? Horizontal evaluation of 4 true wireless headphones
  42. Seamless connection with tableau, how can this large bank with 5000 + active users realize self-service analysis?
  43. react-native版文字跑马灯
  44. React native text running lantern
  45. Java、JavaScript、C、C++、PHP、Python都是用来开发什么?
  46. What are Java, JavaScript, C, C + +, PHP and python used to develop?
  47. this.byId(SupplierForm).bindElement in SAP UI5
  48. SAP UI5 JavaScript文件的lazy load - 懒加载
  49. this.byId (SupplierForm).bindElement in SAP UI5
  50. Lazy load lazy load of SAP ui5 JavaScript files
  51. "Gnome 3" - interface elements, desktop components, part names (learning notes) @ 20210223
  52. How to connect the ground gas to the micro front end?
  53. How to transform single / micro service application into serverless application
  54. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  55. Seven array methods for JavaScript you need to master in 2021
  56. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  57. Seven array methods for JavaScript you need to master in 2021
  58. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  59. Seven array methods for JavaScript you need to master in 2021
  60. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库