javascript - 這兩段JS的程式碼運行效率比較
巴扎黑
巴扎黑 2017-07-05 11:07:16
0
7
970

測試環境

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

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

巴扎黑
巴扎黑

全部回覆(7)
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!