轉載自：https://www.cnblogs.com/MarcoHan/p/5315361.html

前言

隨著計算機的發展，Web 富應用時代的到來，Web 2.0 早已不再是用 div+css 高質量還原設計的時代。自 Gmail 網頁版郵件服務的問世開始，Web 前端開發也開啟了新的紀元。用戶需求不斷提高，各種新的技術層出不窮，前端工程師的地位也越來越重要。然而任何事物都是有兩面性的，隨著前端技術的發展，前端業務越來越繁重，這大大增加了JS代碼量。因此，要提高 Web 的性能，我們不僅需要關注頁面加載的時間，還要注重在頁面上操作的響應速度。那么，接下來我們討論幾種能夠提高 JavaScript 效率的方法。

一、從JavaScript的作用域談起

當 JavaScript 代碼執行時，JavaScript 引擎會創建一個執行環境，又叫執行上下文。執行環境定義了變量或函數有權訪問的其他數據，決定了它們的行為，每個執行環境都有一個與它關聯的變量對象，環境中定義的所有函數、變量都保存在這個對象中。在頁面加載的時候，JavaScript 引擎會創建一個全局的執行環境，所有全局變量和函數都是作為 window 對象（瀏覽器中）的屬性和方法創建的。在此之后，每執行一個函數，JavaScript 引擎都會創建一個對應的執行環境，并將該環境放入環境棧中，所以當前正在執行的函數的執行環境是在環境棧的最頂部的，當函數執行完畢之后，其執行環境會彈出棧，并被銷毀，保存在其中的變量和函數定義也會被銷毀。

當代碼在一個執行環境中執行時，JavaScript 引擎會創建變量對象的一個?作用域鏈，它可以保證對執行環境有權訪問的變量和函數的有序訪問。作用域鏈的前端始終是當前執行的代碼所在的環境的變量對象。全局環境的作用域鏈中只有一個變量對象，它定義了所有可用的全局變量和函數。當函數被創建時，JavaScript 引擎會把創建時執行環境的作用域鏈賦給函數的內部屬性[[scope]]；當函數被執行時，JavaScript 引擎會創建一個?活動對象，最開始時這個活動對象只有一個變量，即 arguments 對象。該活動對象會出現在執行環境作用域鏈的頂端，接下來是函數 [[scope]] 屬性中的對象。

當需要查找某個變量或函數時，JavaScript 引擎會通過執行環境的作用域鏈來查找變量和函數，從作用域鏈的頂端開始，如果沒找到，則向下尋找直至找到為止。若一直到全局作用域都沒有找到,則該變量或函數為 undefined。

舉個栗子：

function add(a,b) {return a + b; }var result = add(2,3);

代碼執行時，add 函數有一個僅包含全局變量對象的 [[scope]] 屬性，add 函數執行時，JavaScript 引擎創建新的執行環境以及一個包含 this、arguments、a、b 的活動對象，并將其添加到作用域鏈中。如下圖所示：

二、使用局部變量

了解了作用域鏈的概念，我們應該知道在查找變量會從作用域鏈的頂端開始一層一層的向下找（即不斷向最大作用域找）。顯然，查找的層數越多，花費的時間越多。所以為了提高查找的速度，我們應該盡量使用 局部變量（到目前為止，局部變量是 JavaScript 中讀寫最快的標識符）。

例如：

function createEle() {document.createElement("div"); } function createEle() {var doc = document;doc.createElement("div"); }

?

當 document 使用次數比較少時，可能無所謂，可是如果在一個函數的循環中大量使用 document ，我們可以提前將 document變成局部變量。

來看看jquery怎么寫的：

(function(window, undefined) {var jQuery = function() {}// ...window.jQuery = window.$ = jQuery; })(window);

這樣寫的優勢：

1、window 和 undefined 都是為了減少變量查找所經過的 scope 作用域。當 window 通過傳遞給閉包內部之后，在閉包內部使用它的時候，可以把它當成一個局部變量，顯然比原先在window scope下查找的時候要快一些。（原來的 window 處于作用域鏈的最頂端，查找速度慢）

2、在 jquery 壓縮版本 jquery.min.js 中可以將局部變量 window 替換成單個字母，減小文件大小，提高加載速度。

3、undefined 也是 JavaScript 中的全局屬性。將 undefined 作為參數傳遞給閉包，因為沒給它傳遞值，它的值就是 undefined，這樣閉包內部在使用它的時候就可以把它當做局部變量使用，從而提高查找速度。undefined 并不是 JavaScript 的保留字或者關鍵字。

4、undefined 在某些低版本的瀏覽器（例如IE8、IE7）中值是可以被修改的（在ECMAScript3中，undefined 是可讀/寫的變量，可以給它賦任意值，這個錯誤在ECMAScript5中做了修正），將 undefined 作為參數并且不給它傳值可以防止因 undefined 的值被修改而產生的錯誤。

?

三、避免增長作用域鏈

在 JavaScript 中，有兩種語句可以臨時增加作用域鏈：with、try-catch

with 可以使對象的屬性可以像全局變量來使用，它實際上是將一個新的變量對象添加到執行環境作用域的頂部，這個變量對象包含了指定對象的所有屬性，因此可以直接訪問。

這樣看似很方便，但是增長了作用域鏈，原來函數中的局部變量不再處于作用域鏈的頂端，因此在訪問這些變量的時候要查找到第二層才能找到它。當 with 語句塊之行結束后，作用域鏈將回到原來的狀態。鑒于 with 的這個缺點，所以不推薦使用。

try-catch 中的 catch 從句 和 with 類似，也是在作用域鏈的頂端增加了一個對象，該對象包含了由 catch 指定命名的異常對象。但是因為 catch 語句只有在發生錯誤的時候才執行，因此影響比較少。

?

四、字符串鏈接優化

由于字符串是不可變的，所以在進行字符串連接時，需要創建臨時字符串。頻繁創建、銷毀臨時字符串會導致性能低下。

當然，這個問題在新版本瀏覽器包括 IE8+ 中都得到了優化，所以不需要擔心

在低版本瀏覽器（IE6、IE7）中，我們可以種數組的 join 方法來代替。

var temp = []; var i = 0; temp[i++] = "Hello"; temp[i++] = " "; temp[i++] ="everyone";var outcome = temp.join("");

?

五、條件判斷

當出現條件判斷時，我們采用什么樣的結構才能使性能最優？

if(val == 0) {return v0; }else if(val == 1) {return v1; }else if(val == 2) {return v2; }else if(val == 3) {return v3; }else if(val == 4) {return v4; }

當條件分支比較多時，我們可以斟酌哪種條件出現的概率比較大，并將對應的語句放在最上面，這樣可以減少判斷次數。

使用 switch 語句，新版的瀏覽器基本上都對 switch 做了優化，這樣層數比較深時，性能比 if 會更好

使用數組：

var v = [v0,v1,v2,v3,v4]; return v[valeue];

要求：對應的結果是單一值，而不是一系列操作

另外，其他方面的優化，譬如

if(condition1) {return v1; } else {return v2 } // 改成 if(condition1) {return v1; } return v2;

?

六、快速循環

1、循環總次數使用局部變量

for( var i = 0;i < arr.length;i++) {} // 改成 var len = arr.length; for( var i = 0;i < len;i++) {}

這樣就避免了每次循環的屬性查找。這點尤其重要，因為在進行 dom 操作時，很多人會這樣寫：

var divList = document.getElementsByTagName("div"); for( var i = 0;i < divList.length;i++) {}

查找DOM元素的屬性是相對耗時的，所以應該避免這種寫法。

2、如果可以，遞減代替遞增

for(var i = 0;i < arr.length;i++) {} // 改成 for(var i = arr.length - 1;i--;) {}var i = 0; while(i < arr.length) {i++; } // 改成 var i = arr.length - 1; while(i--) {}

i=0 的時候會直接跳出，循環次數比較多時還是很有用的。

?

七、展開循環

var i = arr.length - 1; while(i--) {dosomething(arr[i]); }

遇到這樣的情況時，執行一次循環的時候我們可以選擇不止執行一次函數。

var interations = Math.floor(arr.length / 8); var left = arr.length % 8; var i = 0;if(left) {do {dosomething(arr[i++]);} while(--left); } do {dosomething(arr[i++]);dosomething(arr[i++]);dosomething(arr[i++]);dosomething(arr[i++]);dosomething(arr[i++]);dosomething(arr[i++]);dosomething(arr[i++]);dosomething(arr[i++]); } while(--interations);

當遇到大數組，減少循環的開銷，性能不就提上去了嘛。（至于為什么是每次循環，調 8 次函數，大牛測出來的，這樣達到最佳）

?

八、高效存取數據

JavaScript 中 4 種地方可以存取數據：

字面量值；變量；數組元素；對象屬性

字面量值 和 變量 中存取數據是最快的，從數組元素和對象屬性中存取數據相對較慢，并且隨著深度增加，存取速度會越來越慢，譬如 obj.item.value 就比 obj.item 慢。

某些情況下我們可以將對象、數組屬性 存成 局部變量 來提高速度，譬如：

for( var i = 0;i < arr.length;i++) {} // 改成 var len = arr.length; for( var i = 0;i < len;i++) {} var divList = document.getElementsByTagName("div"); for( var i = 0;i < divList.length;i++) {} // 改成 // var divList = document.getElementsByTagName("div"); for( var i = 0,len = divList.length;i < len;i++) {}

?

九、事件委托

事件委托 就是 利用冒泡 的原理，將原本應該添加在某些元素身上的監聽事件，添加到其父元素身上，來達到提高性能的效果。

舉個栗子：

<div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul> </div> <script> window.onload = function() {var ul = document.getElementsByTagName('ul')[0];var liList = document.getElementsByTagName('li');for(var i = 0,len = liList.length;i < len;i++) {liList[i].onclick = function() {alert(this.innerHTML);}} } </script>

這樣我們就為每個li添加了監聽事件了。

顯然，我們通過循環為每個 li 添加監聽事件是不優化的。這樣不僅浪費了內存，在新的 li 加入的時候我們還要重新為它添加監聽事件。

我們可以這樣寫：

<div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul> </div> <script> window.onload = function() {var ul = document.getElementsByTagName('ul')[0];var liList = document.getElementsByTagName('li');ul.onclick = function(e) {var e = e || window.event;var target = e.target || e.srcElement;if(target.nodeName.toLowerCase() == "li") {alert(target.innerHTML);}} } </script>

這樣寫的好處：

只添加一個監聽事件，節省了內存；新加入 li 的時候我們也不用為它單獨添加監聽事件；在頁面中添加事件處理程序所需的時候更少，因為我們只需要為一個 DOM 元素添加事件處理程序。

最后，提一點不會提高性能的建議

if( 2 == value) {}

類似這種判斷的時候推薦常量放在左邊，這樣就可以預防類似 if( value = 2){} 的錯誤了，因為如果少寫了一個等號，?if( value = 2) {} 是合法的語句，而且代碼量變大的時候不容易檢查出來。if( 2 = value) {} 這樣少寫了等號JavaScript引擎會直接報錯，我們就可以愉快地改過來了。（只是建議）

總結

以上是生活随笔為你收集整理的Web前端性能优化——编写高效的JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。