問題描述

測試環(huán)境

百度首頁谷歌瀏覽器控制臺

之所以提出這個問題，是因為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.

根據(jù)報錯信息，我想到的解決方法是用變量代替同樣的選擇器取到的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.經(jīng)過測試，雖然沒有warning了，但是運行效率沒有任何提升。

而且我最近一個公司實習，我看了公司的代碼，根本沒有類似我第二段代碼的寫法，重復進行選擇器操作的代碼不勝枚舉。

我的問題是：像我第二段代碼的優(yōu)化根本沒什么必要。反而多出一個變量無形中增加了維護難度。

看了樓下的回答：增加以下代碼的測試

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;

三次測試結(jié)果分別是：1338 1348 1404。還是沒有提升。

問題解答

錯在哪里其他答案已經(jīng)指出了。我說一點，效率看不到明顯提升是因為編譯器給你優(yōu)化了，事實上大多數(shù)這種低級錯誤都能被優(yōu)化掉，例如變量重復聲明，你聲明一億次也會被優(yōu)化成一次，到了執(zhí)行時就沒區(qū)別了。真正能夠影響js性能的不是這么小的點，但不是說你就可以忽略它，因為編碼思維的提高可比那一點性能提高重要多了。

var result_logo=$(’#result_logo’)應該寫在循環(huán)體外面，在寫js代碼的時候盡量緩存不會變的jquery對象，你們項目代碼有很多重復的寫法，不代表那就是最優(yōu)的寫法

你如果像這樣：

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

這是可以優(yōu)化的。但你寫的變量始終是一個jquery對象，用變量和$()都是一樣的

現(xiàn)代瀏覽器這些都給你優(yōu)化過了，要真正測試效率，你放IE8 9 10下去試試 看看差距大不大。另外你的選擇器是id選擇器本來比較快，換成類選擇器 效率對比也就出來了。

你每次操作打印的東西是一樣的，chrome的緩存機制優(yōu)化了

報錯的原因我覺得就在這句話：warns about duplicated selectors which could be cached.，把變量聲明寫在循環(huán)體外試試

你把獲取標簽和聲明變量的代碼都寫在循環(huán)體里邊，肯定沒提升啊。

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;

理論上這么寫能有點提升，但是你這個測試方法根本不科學，不能完全體現(xiàn)代碼的效率。除了依賴代碼效率，同時和網(wǎng)速也有關(guān)系，反應出來的結(jié)果并不準確。