問題描述

測(cè)試環(huán)境

百度首頁(yè)谷歌瀏覽器控制臺(tái)

之所以提出這個(gè)問題，是因?yàn)閣ebstorm的一個(gè)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最后會(huì)報(bào)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ù)報(bào)錯(cuò)信息，我想到的解決方法是用變量代替同樣的選擇器取到的JS對(duì)象

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;

當(dāng)然這樣就沒有warning了。由于代碼提到運(yùn)行效率，我也測(cè)試了這兩段代碼的運(yùn)行時(shí)間同樣的操作運(yùn)行10000次，測(cè)試三次，第一段代碼的運(yùn)行總時(shí)長(zhǎng)分別是1372，1339，1423第二段代碼的運(yùn)行總時(shí)長(zhǎng)分別是1407，1277，1403.經(jīng)過測(cè)試，雖然沒有warning了，但是運(yùn)行效率沒有任何提升。

而且我最近一個(gè)公司實(shí)習(xí)，我看了公司的代碼，根本沒有類似我第二段代碼的寫法，重復(fù)進(jìn)行選擇器操作的代碼不勝枚舉。

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

看了樓下的回答：增加以下代碼的測(cè)試

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;

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

問題解答

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

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

你如果像這樣：

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

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

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

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

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

你把獲取標(biāo)簽和聲明變量的代碼都寫在循環(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;

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