JavaScript 前端效能優化小竅門例項彙總

智雲程式設計發表於2019-06-16
JavaScript前端優化

在眾多語言中，JavaScript已經佔有重要的一席之地，利用JavaScript我們可以做很多事情 ， 應用廣泛。

在web應用專案中，需要大量JavaScript的程式碼，將來也會越來越多。

但是由於JavaScript是一個作為解釋執行的語言，而且它的單執行緒機制，決定了效能問題是JavaScript的弱點，也是開發者在寫JavaScript的時候需注意的一個問題。

因為經常會遇到Web 2.0應用效能欠佳的問題，主因就是JavaScript效能不足，導致瀏覽器負荷過重。 Javascript效能優化絕不是一種書面的技能，那麼應該如何正確的載入和執行 JavaScript程式碼，從而提高其在瀏覽器中的效能呢？下面就給大家做一些優化小竅門的知識彙總。

無論當前 JavaScript 程式碼是內嵌還是在外鏈檔案中，頁面的下載和渲染都必須停下來等待指令碼執行完成。JavaScript 執行過程耗時越久，瀏覽器等待響應使用者輸入的時間就越長。

瀏覽器在下載和執行指令碼時出現阻塞的原因在於，指令碼可能會改變頁面或JavaScript的名稱空間，它們會對後面頁面內容造成影響。一個典型的例子就是在頁面中使用： 

document.write()

示例： 

<html><head> 
 <title>Source Example</title></head><body> 
 <p> 
 <script type="text/javascript"> 
 document.write("Today is " + (new Date()).toDateString()); </script> 
 </p></body></html>

當瀏覽器遇到<script>標籤時，當前 HTML 頁面無從獲知 JavaScript 是否會向<p> 標籤新增內容，或引入其他元素，或甚至移除該標籤。

因此，這時瀏覽器會停止處理頁面，先執行 JavaScript程式碼，然後再繼續解析和渲染頁面。

同樣的情況也發生在使用 src 屬性載入 JavaScript的過程中，瀏覽器必須先花時間下載外鏈檔案中的程式碼，然後解析並執行它。在這個過程中，頁面渲染和使用者互動完全被阻塞了。

不要使用 with() 語句

這是因為 with() 語句將會在作用域鏈的開始新增額外的變數。額外的變數意味著，當任何變數需要被訪問的時候，JavaScript引擎都需要先掃描with()語句產生的變數，然後才是區域性變數，最後是全域性變數。

因此with()語句同時給區域性變數和全域性變數的效能帶來負面影響，最終使我們優化JavaScript效能的計劃破產。

物件屬性和陣列元素的速度都比變數慢

談到JavaScript的資料，一般來說有4種訪問方式：數值、變數、物件屬性和陣列元素。在考慮優化時，數值和變數的效能差不多，並且速度顯著優於物件屬性和陣列元素。

因此當你多次引用一個物件屬性或者陣列元素的時候，你可以通過定義一個變數來獲得效能提升。（這一條在讀、寫資料時都有效）雖然這條規則在絕大多數情況下是正確的，但是Firefox在優化陣列索引上做了一些有意思的工作，能夠讓它的實際效能優於變數。

但是考慮到陣列元素在其他瀏覽器上的效能弊端，還是應該儘量避免陣列查詢，除非你真的只針對於火狐瀏覽器的效能而進行開發。

避免全域性查詢

在一個函式中會用到全域性物件儲存為區域性變數來減少全域性查詢，因為訪問區域性變數的速度要比訪問全域性變數的速度更快些 

function search() {  
 //當我要使用當前頁面地址和主機域名 
 alert(window.location.href + window.location.host); 
 }  
 //最好的方式是如下這樣 先用一個簡單變數儲存起來 
 function search() {  
 var location = window.location; 
 alert(location.href + location.host); 
 }

避免with語句

和函式類似 ，with語句會建立自己的作用域，因此會增加其中執行的程式碼的作用域鏈的長度，由於額外的作用域鏈的查詢，在with語句中執行的程式碼肯定會比外面執行的程式碼要慢，在能不使用with語句的時候儘量不要使用with語句。 

with (a.b.c.d) { 
 property1 = 1; 
 property2 = 2; 
 } //可以替換為： 
 var obj = a.b.c.d; 
 obj.property1 = 1; 
 obj.property2 = 2;

數字轉換成字串

般最好用”" + 1來將數字轉換成字串，雖然看起來比較醜一點，但事實上這個效率是最高的，效能上來說： 

(“” +) > String() > .toString() > new String()

通過模板元素clone，替代createElement

很多人喜歡在JavaScript中使用document.write來給頁面生成內容。事實上這樣的效率較低，如果需要直接插入HTML，可以找一個容器元素，比如指定一個div或者span，並設定他們的innerHTML來將自己的HTML程式碼插入到頁面中。

通常我們可能會使用字串直接寫HTML來建立節點，其實這樣做，1：無法保證程式碼的有效性，2：字串操作效率低，所以應該是用document.createElement()方法，而如果文件中存在現成的樣板節點，應該是用cloneNode()方法，因為使用createElement()方法之後，你需要設定多次元素的屬性，使用cloneNode()則可以減少屬性的設定次數——同樣如果需要建立很多元素，應該先準備一個樣板節點。 

var frag = document.createDocumentFragment();  
 for (var i = 0; i < 1000; i++) {  
 var el = document.createElement('p'); 
 el.innerHTML = i; 
 frag.appendChild(el); 
 } document.body.appendChild(frag);  
 //替換為： 
 var frag = document.createDocumentFragment(); var pEl = document.getElementsByTagName('p')[0];  
 for (var i = 0; i < 1000; i++) {  
 var el = pEl.cloneNode(false); 
 el.innerHTML = i; 
 frag.appendChild(el); 
 } document.body.appendChild(frag);

避免低效率的指令碼位置

HTML 4 規範指出 <script> 標籤可以放在 HTML 文件的<head>或<body>中，並允許出現多次。Web 開發人員一般習慣在 <head> 中載入外鏈的 JavaScript，接著用 <link> 標籤用來載入外鏈的 CSS 檔案或者其他頁面資訊。

低效率指令碼位置示例： 

<html><head> 
 <title>Source Example</title> 
 <script type="text/javascript" src="script1.js"></script> 
 <script type="text/javascript" src="script2.js"></script> 
 <script type="text/javascript" src="script3.js"></script> 
 <link rel="stylesheet" type="text/css" href="styles.css"></head><body> 
 <p>Hello world!</p></body></html>

然而這種常規的做法卻隱藏著嚴重的效能問題。

在清單 2 的示例中，當瀏覽器解析到 <script> 標籤（第 4 行）時，瀏覽器會停止解析其後的內容，而優先下載指令碼檔案，並執行其中的程式碼，這意味著，其後的 styles.css 樣式檔案和<body>標籤都無法被載入，由於<body>標籤無法被載入，那麼頁面自然就無法渲染了。

因此在該 JavaScript 程式碼完全執行完之前，頁面都是一片空白。下圖描述了頁面載入過程中指令碼和樣式檔案的下載過程。

JavaScript 前端效能優化小竅門例項彙總

我們可以發現一個有趣的現象：第一個 JavaScript 檔案開始下載，與此同時阻塞了頁面其他檔案的下載。

此外，從 script1.js 下載完成到 script2.js 開始下載前存在一個延時，這段時間正好是 script1.js 檔案的執行過程。每個檔案必須等到前一個檔案下載並執行完成才會開始下載。在這些檔案逐個下載過程中，使用者看到的是一片空白的頁面。

從 IE 8、Firefox 3.5、Safari 4 和 Chrome 2 開始都允許並行下載 JavaScript 檔案。這是個好訊息，因為<script>標籤在下載外部資源時不會阻塞其他<script>標籤。遺憾的是，JavaScript 下載過程仍然會阻塞其他資源的下載，比如樣式檔案和圖片。

儘管指令碼的下載過程不會互相影響，但頁面仍然必須等待所有 JavaScript 程式碼下載並執行完成才能繼續。因此，儘管最新的瀏覽器通過允許並行下載提高了效能，但問題尚未完全解決，指令碼阻塞仍然是一個問題。

由於指令碼會阻塞頁面其他資源的下載，因此推薦將所有<script>標籤儘可能放到<body>標籤的底部，以儘量減少對整個頁面下載的影響。

推薦的程式碼放置位置示例： 

<head> 
 <title>Source Example</title> 
 <link rel="stylesheet" type="text/css" href="styles.css"></head><body> 
 <p>Hello world!</p> 
 <!-- Example of efficient script positioning --> 
 <script type="text/javascript" src="script1.js"></script> 
 <script type="text/javascript" src="script2.js"></script> 
 <script type="text/javascript" src="script3.js"></script></body></html>

這段程式碼展示了在 HTML 文件中放置<script>標籤的推薦位置。儘管指令碼下載會阻塞另一個指令碼，但是頁面的大部分內容都已經下載完成並顯示給了使用者，因此頁面下載不會顯得太慢。

這是優化 JavaScript 的首要規則：將指令碼放在底部。

小心使用閉包

雖然你可能還不知道“閉包”，但你可能在不經意間經常使用這項技術。閉包基本上被認為是JavaScript中的new，當我們定義一個即時函式的時候，我們就使用了閉包，比如： 

document.getElementById('foo').onclick = function(ev) { };

閉包的問題在於：根據定義，在它們的作用域鏈中至少有三個物件：閉包變數、區域性變數和全域性變數。這些額外的物件將會導致其他的效能問題。但是Nicholas並不是要我們因噎廢食，閉包對於提高程式碼可讀性等方面還是非常有用的，只是不要濫用它們（尤其在迴圈中）。

在迴圈時將控制條件和控制變數合併起來

提到效能，在迴圈中需要避免的工作一直是個熱門話題，因為迴圈會被重複執行很多次。所以如果有效能優化的需求，先對迴圈開刀有可能會獲得最明顯的效能提升。

一種優化迴圈的方法是在定義迴圈的時候，將控制條件和控制變數合併起來，下面是一個沒有將他們合併起來的例子： 

for ( var x = 0; x < 10; x++ ) { 
};

當我們要新增什麼東西到這個迴圈之前，我們發現有幾個操作在每次迭代都會出現。JavaScript引擎需要： 

#1：檢查 x 是否存在#2：檢查 x 是否小於 0 <span style="color: #888888;">（這裡可能有筆誤）</span>#3：使 x 增加 1

然而如果你只是迭代元素中的一些元素，那麼你可以使用while迴圈進行輪轉來替代上面這種操作： 

var x = 9;do { } while( x-- );

使用 XMLHttpRequest(XHR)物件

此技術首先建立一個 XHR 物件，然後下載 JavaScript 檔案，接著用一個動態<script>元素將 JavaScript 程式碼注入頁面。

通過 XHR 物件載入 JavaScript 指令碼： 

var xhr = new XMLHttpRequest(); 
xhr.open("get", "script1.js", true); 
xhr.onreadystatechange = function(){  
 if (xhr.readyState == 4){  
 if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){  
 var script = document.createElement ("script"); 
 script.type = "text/javascript"; 
 script.text = xhr.responseText; document.body.appendChild(script); 
 } 
 } 
}; 
xhr.send(null);

此程式碼向伺服器傳送一個獲取 script1.js 檔案的 GET 請求。onreadystatechange 事件處理函式檢查readyState 是不是 4，然後檢查 HTTP 狀態碼是不是有效（2XX 表示有效的迴應，304 表示一個快取響應）。

如果收到了一個有效的響應，那麼就建立一個新的<script>元素，將它的文字屬性設定為從伺服器接收到的 responseText 字串。

這樣做實際上會建立一個帶有內聯程式碼的<script>元素。一旦新<script>元素被新增到文件，程式碼將被執行，並準備使用。

這種方法的主要優點是，您可以下載不立即執行的 JavaScript 程式碼。由於程式碼返回在<script>標籤之外（換句話說不受<script>標籤約束），它下載後不會自動執行，這使得您可以推遲執行，直到一切都準備好了。

另一個優點是，同樣的程式碼在所有現代瀏覽器中都不會引發異常。

此方法最主要的限制是：JavaScript 檔案必須與頁面放置在同一個域內，不能從 CDN 下載（CDN 指”內容投遞網路（Content Delivery Network）”，所以大型網頁通常不採用 XHR 指令碼注入技術。

注意NodeList

最小化訪問NodeList的次數可以極大的改進指令碼的效能 

var images = document.getElementsByTagName('img'); for (var i = 0, len = images.length;  
i < len; i++) { 
 }

編寫JavaScript的時候一定要知道何時返回NodeList物件，這樣可以最小化對它們的訪問。

1、進行了對getElementsByTagName()的呼叫

2、獲取了元素的childNodes屬性

3、獲取了元素的attributes屬性

4、訪問了特殊的集合，如document.forms、document.images等等

要了解了當使用NodeList物件時，合理使用會極大的提升程式碼執行速度

避免與null進行比較

由於JavaScript是弱型別的，所以它不會做任何的自動型別檢查，所以如果看到與null進行比較的程式碼，嘗試使用以下技術替換：

1、如果值應為一個引用型別，使用instanceof操作符檢查其建構函式

2、如果值應為一個基本型別，作用typeof檢查其型別

3、如果是希望物件包含某個特定的方法名，則使用typeof操作符確保指定名字的方法存在於物件上

尊重物件的所有權

因為JavaScript可以在任何時候修改任意物件，這樣就可以以不可預計的方式覆寫預設的行為，所以如果你不負責維護某個物件，它的物件或者它的方法，那麼你就不要對它進行修改，具體一點就是說：

1、不要為例項或原型新增屬性

2、不要為例項或者原型新增方法

3、不要重定義已經存在的方法

4、不要重複定義其它團隊成員已經實現的方法，永遠不要修改不是由你所有的物件，你可以通過以下方式為物件建立新的功能:

01、建立包含所需功能的新物件，並用它與相關物件進行互動

02、建立自定義型別，繼承需要進行修改的型別，然後可以為自定義型別新增額外功能

迴圈引用

如果迴圈引用中包含DOM物件或者ActiveX物件，那麼就會發生記憶體洩露。

記憶體洩露的後果是在瀏覽器關閉前，即使是重新整理頁面，這部分記憶體不會被瀏覽器釋放。

簡單的迴圈引用： 

var el = document.getElementById('MyElement');  
 var func = function () {  
 //… 
 } 
 el.func = func; 
 func.element = el;

但是通常不會出現這種情況。通常迴圈引用發生在為dom元素新增閉包作為expendo的時候。 

function init() {  
var el = document.getElementById('MyElement'); 
el.onclick = function () {  
//…… 
} 
} 
init();

init在執行的時候，當前上下文我們叫做context。這個時候，context引用了el，el引用了function，function引用了context。這時候形成了一個迴圈引用。

下面2種方法可以解決迴圈引用：

1、置空dom物件 

function init() {  
 var el = document.getElementById('MyElement'); 
 el.onclick = function () {  
 //…… 
 } 
 } 
 init();  
 //可以替換為： 
 function init() {  
 var el = document.getElementById('MyElement'); 
 el.onclick = function () {  
 //…… 
 } 
 el = null; 
 } 
 init();

將el置空，context中不包含對dom物件的引用，從而打斷迴圈應用。

如果我們需要將dom物件返回，可以用如下方法： 

function init() {  
 var el = document.getElementById('MyElement'); 
 el.onclick = function () {  
 //…… 
 } return el; 
 } 
 init();  
 //可以替換為： 
 function init() {  
 var el = document.getElementById('MyElement'); 
 el.onclick = function () {  
 //…… 
 } try {  
 return el; 
 } finally { 
 el = null; 
 } 
 } 
 init();

2、構造新的context 

function init() {  
 var el = document.getElementById('MyElement'); 
 el.onclick = function () {  
 //…… 
 } 
 } 
 init();  
 //可以替換為： 
 function elClickHandler() {  
 //…… 
 } function init() { var el = document.getElementById('MyElement'); 
 el.onclick = elClickHandler; 
 } 
 init();

把function抽到新的context中，這樣，function的context就不包含對el的引用，從而打斷迴圈引用。

通過javascript建立的dom物件，必須append到頁面中

IE下，指令碼建立的dom物件，如果沒有append到頁面中，重新整理頁面，這部分記憶體是不會回收的！ 

 function create() {  
 var gc = document.getElementById('GC'); for (var i = 0; i < 5000; i++) {  
 var el = document.createElement('div'); 
 el.innerHTML = "test";  
 //下面這句可以註釋掉， 
看看瀏覽器在工作管理員中， 
點選按鈕然後重新整理後的記憶體變化 
 gc.appendChild(el); 
 } 
 }

字串連線

如果要連線多個字串，應該少使用+=，如 

s+=a;  
s+=b;  
s+=c;

應該寫成 

s+=a + b + c；

而如果是收集字串，比如多次對同一個字串進行+=操作的話，最好使用一個快取，使用JavaScript陣列來收集，最後使用join方法連線起來 

var buf = []; 
 for (var i = 0; i < 100; i++) { buf.push(i.toString()); 
 } var all = buf.join("");

各種型別轉換 

var myVar = "3.14159", 
 str = "" + myVar, // to string  
 i_int = ~ ~myVar, // to integer  
 f_float = 1 * myVar, // to float  
 b_bool = !!myVar, /* to boolean - any string with length  
 and any number except 0 are true */ 
 array = [myVar]; // to array

如果定義了toString()方法來進行型別轉換的話，推薦  顯式呼叫toString()  ，因為內部的操作在嘗試所有可能性之後，會嘗試物件的toString()方法嘗試能否轉化為String，所以直接呼叫這個方法效率會更高。

多個型別宣告

在JavaScript中所有變數都可以使用單個var語句來宣告，這樣就是組合在一起的語句，以減少整個指令碼的執行時間，就如上面程式碼一樣，上面程式碼格式也挺規範，讓人一看就明瞭。

插入迭代器

如var name=values[i]; i++;前面兩條語句可以寫成var name=values[i++]。

使用直接量 

var aTest = new Array(); //替換為 
 var aTest = []; 
 var aTest = new Object; //替換為 
 var aTest = {}; 
 var reg = new RegExp(); //替換為 
 var reg = /../; 
 //如果要建立具有一些特性的一般物件，也可以使用字面量，如下： 
 var oFruit = new O; 
 oFruit.color = "red"; 
 oFruit.name = "apple"; 
 //前面的程式碼可用物件字面量來改寫成這樣： 
 var oFruit = { color: "red", name: "apple" };

避免雙重解釋

如果要提高程式碼效能，儘可能避免出現需要按照JavaScript解釋的字串，也就是

1、儘量少使用eval函式

使用eval相當於在執行時再次呼叫解釋引擎對內容進行執行，需要消耗大量時間，而且使用Eval帶來的安全性問題也是不容忽視的。

2、不要使用Function構造器

不要給setTimeout或者setInterval傳遞字串引數 

var num = 0; 
setTimeout('num++', 10); 
//可以替換為： 
var num = 0; 
function addNum() { 
num++; 
} 
setTimeout(addNum, 10);

縮短否定檢測 

if (oTest != '#ff0000') { 
 //do something 
 } 
 if (oTest != null) { 
 //do something 
 } 
 if (oTest != false) { 
 //do something 
 } 
 //雖然這些都正確，但用邏輯非操作符來操作也有同樣的效果： 
 if (!oTest) { 
 //do something 
 }

釋放javascript物件

在rich應用中，隨著例項化物件數量的增加，記憶體消耗會越來越大。所以應當及時釋放對物件的引用，讓GC能夠回收這些記憶體控制元件。

物件：obj = null

物件屬性：delete obj.myproperty

陣列item：使用陣列的splice方法釋放陣列中不用的item

效能方面的注意事項

1、儘量使用原生方法

2、switch語句相對if較快

通過將case語句按照最可能到最不可能的順序進行組織。

3、位運算較快

當進行數字運算時，位運算操作要比任何布林運算或者算數運算快。

4、巧用||和&&布林運算子 

function eventHandler(e) { 
 if (!e) e = window.event; 
 } 
 //可以替換為： 
 function eventHandler(e) { 
 e = e || window.event; 
 } 
 if (myobj) { 
 doSomething(myobj); 
 } 
 //可以替換為： 
 myobj && doSomething(myobj);

避免錯誤應注意的地方

1、每條語句末尾須加分號

在if語句中，即使條件表示式只有一條語句也要用{}把它括起來，以免後續如果新增了語句之後造成邏輯錯誤。

2、使用+號時需謹慎

JavaScript 和其他程式語言不同的是，在 JavaScript 中，’+'除了表示數字值相加，字串相連線以外，還可以作一元運算子用，把字串轉換為數字。因而如果使用不當，則可能與自增符’++’混淆而引起計算錯誤。 

var valueA = 20; 
 var valueB = "10"; 
 alert(valueA + valueB); //ouput: 2010  
 alert(valueA + (+valueB)); //output: 30  
 alert(valueA + +valueB); //output:30  
 alert(valueA ++ valueB); //Compile error

3、使用return語句需要注意

一條有返回值的return語句不要用()括號來括住返回值，如果返回表示式，則表示式應與return關鍵字在同一行，以避免壓縮時，壓縮工具自動加分號而造成返回與開發人員不一致的結果。 

function F1() { 
 var valueA = 1; 
 var valueB = 2; 
 return valueA + valueB; 
 } 
 function F2() { 
 var valueA = 1; 
 var valueB = 2; 
 return 
 valueA + valueB; 
 } 
 alert(F1()); //output: 3  
 alert(F2()); //ouput: undefined

==和===的區別

避免在if和while語句的條件部分進行賦值，如if (a = b)，應該寫成if (a == b)，但是在比較是否相等的情況下，最好使用全等執行符，也就是使用===和!==操作符會相對於==和!=會好點。==和!=操作符會進行型別強制轉換。 

var valueA = "1"; 
 var valueB = 1; 
 if (valueA == valueB) { 
 alert("Equal"); 
 } 
 else { 
 alert("Not equal"); 
 } 
 //output: "Equal" 
 if (valueA === valueB) { 
 alert("Equal"); 
 } 
 else { 
 alert("Not equal"); 
 } 
 //output: "Not equal"

不要使用生偏語法

不要使用生偏語法，寫讓人迷惑的程式碼，雖然計算機能夠正確識別並執行，但是晦澀難懂的程式碼不方便以後維護。

函式返回統一型別

雖然JavaScript是弱型別的，對於函式來說，前面返回整數型資料，後面返回布林值在編譯和執行都可以正常通過，但為了規範和以後維護時容易理解，應保證函式應返回統一的資料型別。

總是檢查資料型別

要檢查你的方法輸入的所有資料，一方面是為了安全性，另一方面也是為了可用性。使用者隨時隨地都會輸入錯誤的資料。這不是因為他們蠢，而是因為他們很忙，並且思考的方式跟你不同。用typeof方法來檢測你的function接受的輸入是否合法。

何時用單引號，何時用雙引號

雖然在JavaScript當中，雙引號和單引號都可以表示字串, 為了避免混亂，我們建議在HTML中使用雙引號，在JavaScript中使用單引號，但為了相容各個瀏覽器，也為了解析時不會出錯，定義JSON物件時，最好使用雙引號。

部署

1、用JSLint執行JavaScript驗證器來確保沒有語法錯誤或者是程式碼沒有潛在的問

2、部署之前推薦使用壓縮工具將JS檔案壓縮

3、檔案編碼統一用UTF-8

4、JavaScript 程式應該儘量放在 .js 的檔案中，需要呼叫的時候在 HTML 中以 <script src=”filename.js”> 的形式包含進來。

JavaScript 程式碼若不是該 HTML 檔案所專用的，則應儘量避免在 HTML 檔案中直接編寫 JavaScript 程式碼。因為這樣會大大增加 HTML 檔案的大小，無益於程式碼的壓縮和快取的使用。另外，<script src=”filename.js”> 標籤應儘量放在檔案的後面,最好是放在</body>標籤前。

這樣會降低因載入 JavaScript 程式碼而影響頁面中其它元件的載入時間。自己是個做了幾年開發的老碼農，推薦一下我的前端開發學習扣qun 767273102 ，無論你是大牛還是小白，是想轉行還是想入行都可以來了解一起進步一起學習！內有開發工具，很多幹貨和技術資料分享！希望新手少走彎路


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2647819/，如需轉載，請註明出處，否則將追究法律責任。

相關文章