浏览器如何优化我的JavaScript

How Browser optimizing my JavaScript

本文关键字:我的 JavaScript 优化 何优化 浏览器      更新时间:2023-09-26

JavaScript是在浏览器中通过优化解释为字节码,还是只是简单地从脚本行执行?

例如我有两个方法:

// function with clear defining local variables for each calculation
function moreReadable(p1, p2, p3) {
   var a = p1 + p2;
   var resA = someFunction(a);
      // some actions with resA 
   var b = p2 + p3;
   var resB = someFunction(b);
      // some actions with resB
   var c = p1 + p3;
   var resC = someFunction(c);
      // some actions with resA
}
// function which reuses first declared variable, for all calculations
function optimized(p1, p2, p3){
   var a = p1 + p2;
   a = someFunction(a);
      // some actions with a
   a = p2 + p3;
   a = someFunction(a);
      // some actions with a
   a = p1 + p3;
   a = someFunction(a);
      // some actions with a
}

第二种方法在性能或内存使用方面是否有优势?显然,它使用的局部变量更少。但是做优化有意义吗?Chrome将优化这两个相同的执行代码?

我建议你阅读以下关于Chrome正在使用的V8 Javascript引擎的文章:

  • https://github.com/v8/v8/wiki/Design%20Elements

引擎确实会进行优化,但这并不意味着它会优化你的代码。

这是一篇相当大的文章/wiki,但它将帮助你通过了解引擎来理解JS是如何解释成字节码的。

现在关于你的代码示例,你只是解决可读性问题,你不会得到性能的提升。JS是一种非常奇怪的语言,即使它很简单。这意味着有时代码越少越好,有时则不然。

这一切都是在你的代码复杂性和架构的最后。

尽管取决于你的代码库/项目,你应该衡量性能并调整它以获得更好的结果;)

希望能有所帮助。

要给这个问题一个绝对确定的答案是相当困难的。首先,变量声明的优化取决于js引擎实现。。

例如,Chrome的V8 -编译JS为机器代码,使用两种不同的编译器:快速和优化。

JS函数是用优化过的编译器编译的,当V8理解这个函数经常使用时,有理由花更多的时间在编译上以获得函数使用的时间。在这种情况下,moreReadable()optimized()函数之间绝对没有区别。

谈到V8的快速(base)编译器,我认为它不是绝对盲目编译的,所以比较函数也可能产生相同的机器码。为了确保这一点,需要编译两个函数并比较结果机器码。但这不是一个5分钟的任务。