javascript – Vergleich der Laufeffizienz dieser beiden JS-Codeteile

Question

Testumgebung

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

Der Grund, warum ich diese Frage stelle, ist eine Warnmeldung von Webstorm.

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;

Der obige Code meldet am Ende des Webstorms eine Warnung und die Warninformationen lauten wie folgt:

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.

Laut Fehlermeldung besteht die Lösung, die ich gefunden habe, darin, Variablen zu verwenden, um die vom selben Selektor erhaltenen JS-Objekte zu ersetzen

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;

Natürlich gibt es hier keine Warnung.
Da im Code die Ausführungseffizienz erwähnt wird, habe ich auch die Laufzeit dieser beiden Codeteile getestet.
Derselbe Vorgang wurde 10.000 Mal ausgeführt und dreimal getestet. Die Gesamtlaufzeit des ersten Codeteils betrug jeweils 1372, 1339 und 1423
Der zweite Teil des Codes Die Gesamtlaufzeit beträgt 1407, 1277 bzw. 1403. Nach dem Test wurde die Betriebseffizienz nicht verbessert, obwohl keine Warnung angezeigt wurde.

Und ich habe kürzlich ein Praktikum bei einem Unternehmen gemacht und mir den Code des Unternehmens angesehen, und es gab nichts, was meinem zweiten Code ähnelte. Es gab unzählige Codes, die wiederholt Selektoroperationen durchführten.

Mein Problem ist: Die Optimierung meines zweiten Codes ist überhaupt nicht notwendig. Im Gegenteil: Wenn eine weitere Variable vorhanden ist, wird die Wartung praktisch schwieriger.

---

Lesen Sie die Antwort unten:

Fügen Sie einen Test für den folgenden Code hinzu

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;

Die Ergebnisse der drei Tests sind: 1338 1348 1404. Immer noch keine Besserung.

Answer 1

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

Answer 2

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

Answer 3

你如果像这样：

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

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

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;

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