首頁 web前端 js教程 JavaScript如何提升程式碼效能的用法匯總

JavaScript如何提升程式碼效能的用法匯總

Jul 26, 2017 pm 01:47 PM
javascript js 效能

使用字串累加計算風格 

使用+運算會在記憶體中建立一個新的字串並將連接的值賦給它。只是將這個結果賦值給一個變數。
為了避免連結結果的中間變量,可以使用+=來直接賦值結果。

運行緩慢的程式碼: 

a += 'x' + 'y';
登入後複製

運行更快的程式碼: 

a += 'x'; a += 'y';
登入後複製


## 原操作會比函數呼叫快
可以考慮在效能要求關鍵的循環和函數中使用可以替代的原始操作。
執行緩慢的程式碼: 

var min = Math.min(a, b); 
arr.push(val);
登入後複製

執行更快的程式碼: 

var min = a < b ? a : b; 
arr[arr.length] = val;
登入後複製

設定setTimeout() 和setInterval() 時傳遞函數名稱而不是字串 

如果你傳遞一個字串到setTimeout() 或setInterval()中,字串將會被eval計算而導致緩慢。

使用一個匿名函數包裝來代替,這樣在編譯的時候就可以被解釋和最佳化。

運行緩慢的程式碼:


setInterval('doSomethingPeriodically()', 1000); 
setTimeOut('doSomethingAfterFiveSeconds()', 5000);
登入後複製

運行更快的程式碼: 

setInterval(doSomethingPeriodically, 1000); 
setTimeOut(doSomethingAfterFiveSeconds, 5000);
登入後複製

避免在物件中使用不需要的DOM參考 


不要這麼做: 

var car = new Object(); 
car.color = "red"; 
car.type = "sedan"
登入後複製

更好的一種形式:

var car = { 
color : "red"; 
type : "sedan" 
}
登入後複製

最清晰的目標速度,最小化作用域鏈結

 


低效率方法: 

var url = location.href;
登入後複製

一種高效率形式: 

var url = window.location.href;
登入後複製

試著在腳本中少使用註釋,避免使用長變數名
盡可能的保證註釋少或避免使用註釋,特別是在函數,循環以及數組中。
註解不必要的減緩腳本執行並且增加了檔案大小。例如: 

不建議的形式:


function someFunction() 
{ 
var person_full_name="somename"; /* stores the full name*/ 
}
登入後複製

更好的寫法: 

function someFunction() 
{ 
var name="somename"; 
}
登入後複製

在目前作用域儲存應用的外部變數


當一個函數被執行的運行上下問被穿件,一個活動的物件會包含所有局部變數會被推到上下文鏈的前面。

在作用域鏈中,最慢的是清楚的識別標識符,意味著局部變數是最快的。儲存頻繁使用的外部變數讀取和寫入都會明顯的加快。這對於全域變數和其他深層的標識符查找特別明顯。

同樣,在目前作用域中的變數(var myVar)比物件像屬性的存取速度快(this.myVar)。
運行緩慢的程式碼:

function doSomething(text) { 
var ps = document.getElementsByTagName('p'), 
text = ['foo', /* ... n ... */, 'bar']; 
for (var i = 0, l = ps.length; i < l; i++) { 
ps[i].innerHTML = text[i]; 
} 
}
登入後複製

運行更快的程式碼:

function doSomethingFaster(text) { 
var doc = document, 
ps = doc.getElementsByTagName('p'), 
text = ['foo', /* ... n ... */, 'bar']; 
for (var i = 0, l = ps.length; i < l; i++) { 
ps[i].innerHTML = text[i]; 
} 
}
登入後複製

如果你需要存取一個元素(如 head)在一個大的迴圈中,使用一個本地的DOM存取(如範例中的get)會更快。

運行更快的程式碼:

function doSomethingElseFaster() { 
var get = document.getElementsByTagName; 
for (var i = 0, i < 100000; i++) { 
get('head'); 
} 
}
登入後複製


使用變數快取值

在做重複工作的地方使用局部變數快取值。

下面的一組例子顯示了儲存值到局部變數的廣泛意義。


範例1.計算執行前在循環體內使用變數儲存數學函數

錯誤的方法: 

var d=35; 
for (var i=0; i<1000; i++) { 
y += Math.sin(d)*10; 
}
登入後複製

更好的處理: 
var d = 55; 
var math_sind = Math.sin(d)*10; 
for (var i=0; i<1000; i++) { 
y += math_sind; 
}
登入後複製

例子2.保存數組的長度在循環中使用###糟糕的處理: ###數組的長度每次都會被重複計算 ###
for (var i = 0; i < arr.length; i++) { 
// do something 
}
登入後複製
###更好的改進:###更好的方法是保存陣列的長度 ###
for (var i = 0, len = arr.length; i < len; i++) { 
// do something 
}
登入後複製
###總的來說,如果已經做了一次,我們就不需要重複的來做不必要的工作。例如,作用域或函數中多次使用到計算的一個表達式的值,保存到變數可以使它多次被使用,否則我們會過頭的宣告一個變數並賦值然後只適用一次。所以請記住這些。 ############

以上是JavaScript如何提升程式碼效能的用法匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Win11和Win10系統效能對比,究竟哪一個更勝一籌? Win11和Win10系統效能對比,究竟哪一個更勝一籌? Mar 27, 2024 pm 05:09 PM

Win11和Win10系統效能對比,究竟哪一個更勝一籌?

Windows10與Windows11效能比較:哪個更勝一籌? Windows10與Windows11效能比較:哪個更勝一籌? Mar 28, 2024 am 09:00 AM

Windows10與Windows11效能比較:哪個更勝一籌?

麒麟8000處理器抗衡驍龍系列:誰能稱王? 麒麟8000處理器抗衡驍龍系列:誰能稱王? Mar 25, 2024 am 09:03 AM

麒麟8000處理器抗衡驍龍系列:誰能稱王?

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

建議:優秀JS開源人臉偵測辨識項目

PHP與Go語言比較:效能差異大 PHP與Go語言比較:效能差異大 Mar 26, 2024 am 10:48 AM

PHP與Go語言比較:效能差異大

本地運作效能超越 OpenAI Text-Embedding-Ada-002 的 Embedding 服務,太方便了! 本地運作效能超越 OpenAI Text-Embedding-Ada-002 的 Embedding 服務,太方便了! Apr 15, 2024 am 09:01 AM

本地運作效能超越 OpenAI Text-Embedding-Ada-002 的 Embedding 服務,太方便了!

不同Java框架的效能對比 不同Java框架的效能對比 Jun 05, 2024 pm 07:14 PM

不同Java框架的效能對比

C++ 函式對程式效能有哪些影響? C++ 函式對程式效能有哪些影響? Apr 12, 2024 am 09:39 AM

C++ 函式對程式效能有哪些影響?

See all articles