javascript - 这两段JS的代码运行效率比较

问题描述

问 题

测试环境

百度首页
谷歌浏览器控制台

之所以提出这个问题，是因为webstorm的一个warnning信息。

var startTime=new Date().getTime();
for(let i=0;i<10000;i++){
    console.log($('#result_logo').text());
    console.log($('#result_logo').html());
}
var endTime=new Date().getTime();
var myTime=endTime-startTime;
myTime;

上述的代码在webstorm最后会报warning，warning信息如下：

Checks that jQuery selectors are used in an efficient way. 
It suggests to split descendant selectors which are prefaced with ID selector 
and warns about duplicated selectors which could be cached.

根据报错信息，我想到的解决方法是用变量代替同样的选择器取到的JS对象

var startTime=new Date().getTime();
for(let i=0;i<10000;i++){
    var result_logo=$('#result_logo');
    console.log(result_logo.text());
    console.log(result_logo.html());
}
var endTime=new Date().getTime();
var myTime=endTime-startTime;
myTime;

当然这样就没有warning了。
由于代码提到运行效率，我也测试了这两段代码的运行时间
同样的操作运行10000次，测试三次，第一段代码的运行总时长分别是1372，1339，1423
第二段代码的运行总时长分别是1407，1277，1403.
经过测试，虽然没有warning了，但是运行效率没有任何提升。

而且我最近一个公司实习，我看了公司的代码，根本没有类似我第二段代码的写法，重复进行选择器操作的代码不胜枚举。

我的问题是：像我第二段代码的优化根本没什么必要。反而多出一个变量无形中增加了维护难度。

---

看了楼下的回答：
增加以下代码的测试

var startTime=new Date().getTime();
for(let i=0;i<10000;i++){
    console.log($('#result_logo').text());
    console.log($('#result_logo').html());
}
var endTime=new Date().getTime();
var myTime=endTime-startTime;
myTime;

三次测试结果分别是：1338 1348 1404。还是没有提升。

解决方案

错在哪里其他答案已经指出了。
我说一点，效率看不到明显提升是因为编译器给你优化了，事实上大多数这种低级错误都能被优化掉，例如变量重复声明，你声明一亿次也会被优化成一次，到了执行时就没区别了。
真正能够影响js性能的不是这么小的点，但不是说你就可以忽略它，因为编码思维的提高可比那一点性能提高重要多了。

这篇关于javascript - 这两段JS的代码运行效率比较的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！