JavaScript performance optimization [inline cache] V8 engine features

Yang Zhoulong 2021-02-23 15:07:49
javascript performance optimization inline cache


javascript A single thread 、 Dynamic type language , So how do we code for the best performance ? I'll talk about V8 Inline optimization of the engine . With inline caching, we can write better code .

What is inline caching

Quoting the official description : inline caching (Inline caching) It is the optimization technology adopted by the runtime system of some programming languages , The earliest is Smalltalk Development . The goal of inline caching is through Remember to go directly to the call point before To speed up method binding at run time by using the results of method queries . Inline caching is particularly useful for dynamically typed languages , Most of them ( If not all ) Method binding occurs at run time , So virtual method tables are usually not available .

  • We can understand it as javascript Every time the stack is executed, an external function is called 、 Object to generate address cache records , When the next execution reaches this location, the corresponding record will be directly retrieved from the cache , Save the process of rediscovering, from speeding up program execution .

Convert to code

Analog computing logic ( Pseudo code )
In order to better present the optimization of inline cache , We make the logic of all methods of the object consistent .
 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
}
}
Code that doesn't use inline optimization strategies
 function notOptimization(val, type) {
Calculator[type](val) // Dynamically executing functions , The address cannot be determined at the current point
}
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')

The above code uses hash to quickly find the corresponding function , But abandon the inline caching policy . Code 5 The first execution result , Average is 80ms about
 Insert picture description here

Use inline cache policy code
 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')

This code uses multiple layers if else Make function calls ( In order to optimize the inline cache policy , It should be used correctly switch Or array lookup ), Let's look at execution 5 Secondary results , Speed is 55~50ms
 Insert picture description here

summary , So in the coding process, we try to use less dynamic call operations , But relative object property values get hashes 、 The way arrays work is much faster than if、switch Of
版权声明
本文为[Yang Zhoulong]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210223145521951Z.html

  1. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  2. About webpack
  3. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  4. 详解vue静态资源打包中的坑与解决方案
  5. 一篇搞懂TCP、HTTP、Socket、Socket连接池
  6. 字节跳动2021前端技术岗发布+最新内部面试题
  7. Detailed explanation of Vue static resource packaging and Solutions
  8. Understanding TCP, HTTP, socket, socket connection pool
  9. 2008-2021 front end technical post release + latest internal interview questions
  10. 4. Vue基本指令
  11. 4. Vue basic instruction
  12. Java 发起 http 请求
  13. Java initiates HTTP request
  14. 网站由http升级为https图文教程
  15. Upgrade the website from HTTP to HTTPS
  16. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  17. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  18. 混合开发入门 Vue结合Android/iOS开发仿京东项目App
  19. Hybrid development entry Vue combined with Android / IOS to develop app imitating Jingdong project
  20. 无缝对接 Tableau,这家月活跃用户 5000+ 的大型银行如何实现自助式分析?
  21. Are airpods still the strongest? Horizontal evaluation of 4 true wireless headphones
  22. Seamless connection with tableau, how can this large bank with 5000 + active users realize self-service analysis?
  23. react-native版文字跑马灯
  24. React native text running lantern
  25. Java、JavaScript、C、C++、PHP、Python都是用来开发什么?
  26. What are Java, JavaScript, C, C + +, PHP and python used to develop?
  27. this.byId(SupplierForm).bindElement in SAP UI5
  28. SAP UI5 JavaScript文件的lazy load - 懒加载
  29. this.byId (SupplierForm).bindElement in SAP UI5
  30. Lazy load lazy load of SAP ui5 JavaScript files
  31. "Gnome 3" - interface elements, desktop components, part names (learning notes) @ 20210223
  32. How to connect the ground gas to the micro front end?
  33. How to transform single / micro service application into serverless application
  34. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  35. Seven array methods for JavaScript you need to master in 2021
  36. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  37. Seven array methods for JavaScript you need to master in 2021
  38. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  39. Seven array methods for JavaScript you need to master in 2021
  40. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  41. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  42. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  43. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  44. 前端面试常考题:JS垃圾回收机制
  45. Frequently asked questions in front end interview: JS garbage collection mechanism
  46. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  47. Java之HTTP网络编程(一):TCP/SSL网页下载
  48. HTTP network programming in Java (1): TCP / SSL web page download
  49. Java之HTTP网络编程(一):TCP/SSL网页下载
  50. HTTP network programming in Java (1): TCP / SSL web page download
  51. 使用vite搭建vue项目
  52. 在组件中展示pdf文件:vue-pdf (由于未找到方法滑动加载下一页,只能点击加载下一页pdf文件)
  53. 在 vue 中通过 express 连接数据库
  54. Using vite to build Vue project
  55. Display PDF file in component: Vue pdf
  56. Connecting database through express in Vue
  57. 2021届秋招哈啰出行前端面经(一面)
  58. vue使用sdk进行七牛云上传
  59. Javascript性能优化【内联缓存】 V8引擎特性
  60. Small true wireless smart headset evaluation: put intelligence into the ear