V8优化代码案例

分手后的思念是犯贱 2022-10-13 02:50 209阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70]  
这里贴一下V8引擎的结构，在拿到JS代码后会讲重要的信息提取出来，存储在一些数据结构里，通过解释器和编译优化得到最终机器执行的代码。但是在经过`编译优化`后的代码，有些时候会出现优化的代码不合适，这个时候会出现`逆优化`的情况，此时反而会降低运行效率。所以我们编写代码时，应该尽量按V8的优化去编写代码，尽量减少出现逆优化的情况。下面举个代码的例子：

const { performance, PerformanceObserver} = require('perf_hooks');
    
    const add = (a, b) => a+b;
    
    const num1 = 1;
    const num2 = 2;
    
    performance.mark('start');
    
    for(let i = 0; i < 10000000; i++) { 
    	add(num1, num2);
    }
    
    add(num1, 's');
    
    for(let i = 0; i < 10000000; i++) { 
    	add(num1, num2);
    }
    
    performance.mark('end');
    
    const observer = new PerformanceObserver((list) => { 
    	console.log(list.getEntries()[0]);
    })
    observer.observe({ entryTypes: ['measure']});
    
    performance.measure('测量1', 'start', 'end');

我们运行一下，执行情况如下：  
![在这里插入图片描述][20210706090007565.png]  
我们注释掉这一行代码

// add(num1, 's');

再次运行  
![在这里插入图片描述][20210706090212370.png]

能看到有明显的性能提升

原因就是因为V8认为`add(num1, num2);`是一个很稳定的函数，所以对这个函数做了优化。但是当出现`add(num1, 's');`时，之前优化的模板无法继续使用，这个时候要进行逆优化，所以就加大了开销。

> Tips:如果我们想查看具体做了什么优化和什么逆优化，可以用以下命令:
> 
>     node --trace-opt --trace-deopt opt.js

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70]: /images/20221005/8c605bc37cef424394fe36a293370a0c.png
[20210706090007565.png]: /images/20221005/ecfb3e5ded834b0d998fc165f674ef98.png
[20210706090212370.png]: /images/20221005/f40ca06760dd438987aaafba74f8c303.png