javascript - 這兩段JS的程式碼運行效率比較

Question

測試環境

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

之所以提出這個問題，是因為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。還是沒有提升。

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;

理論上這麼寫能有點提升，但是你這個測試方法根本不科學，不能完全體現程式碼的效率。除了依賴程式碼效率，同時和網路速度也有關係，反應出來的結果並不準確。