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性能的不是这么小的点，但不是说你就可以忽略它，因为编码思维的提高可比那一点性能提高重要多了。

var result_logo=$(’#result_logo’)应该写在循环体外面，在写js代码的时候尽量缓存不会变的jquery对象，你们项目代码有很多重复的写法，不代表那就是最优的写法

你如果像这样：

var res = document.querySelector('#result_logo');console.log(res.innerHTML);console.log(res.outerHTml);

这是可以优化的。但你写的变量始终是一个jquery对象，用变量和$()都是一样的

现代浏览器这些都给你优化过了，要真正测试效率，你放IE8 9 10下去试试 看看差距大不大。另外你的选择器是id选择器本来比较快，换成类选择器 效率对比也就出来了。

你每次操作打印的东西是一样的，chrome的缓存机制优化了

报错的原因我觉得就在这句话：warns about duplicated selectors which could be cached.，把变量声明写在循环体外试试

你把获取标签和声明变量的代码都写在循环体里边，肯定没提升啊。

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

理论上这么写能有点提升，但是你这个测试方法根本不科学，不能完全体现代码的效率。除了依赖代码效率，同时和网速也有关系，反应出来的结果并不准确。