OneAPM大講堂 | 提高JavaScript效能的30個技巧

文章系國內領先的 ITOM 管理平臺供應商 OneAPM 編譯呈現。

您是網站管理員還是網頁開發人員?想建立超快速的網站嗎?

今天我們來看看 JavaScript，這項神奇而又複雜的技術。它使網站內容更加豐富，但常常出現的執行效能問題又降低了使用者的體驗。事實已經證明，最佳的終端使用者體驗能提升網站的轉換率、Google搜尋排名以及訪問者的滿意度。高效能的JavaScript意味著會給您和您的公司帶來更多更好的業務。

下面我們介紹提高 JavaScript 效能的一些技巧。同樣地，這或許可以幫助網站管理員和網站開發人員建立快速的網站，並提供一流的使用者體驗。

技巧 #1 – 評估區域性變數 (http://blogs.msdn.com/b/ie/archive/2006/08/28/728654.aspx)

主要針對IE而言，由於區域性變數的查詢是從最特定作用域到最大作用域，且可以通過多個域層級，所以這種查詢會導致查詢到通用的結果。在定義函式作用域的時候，如果一個區域性變數在之前沒有進行過var變數宣告， 那麼此處一定要在變數名前加上var關鍵字以定義其當前的作用域和防止查詢，從而提高程式碼的速度。

技巧 #2 – 建立程式碼快捷方式以加速編碼 對於使用頻繁的有用程式碼，可以通過為較長的程式碼建立快捷方式來加快編碼過程，例如 document.getElementById。 通過建立一個快捷方式，編寫較長的指令碼便不會耗時太久，並且可以節省整個過程的時間。

技巧 #3 – 在將元素片段新增到DOM之前對其實施操作 (http://www.jquery4u.com/dom-modification/improve-javascript-performance)

在建立 DOM 的元素節點之前，請確保已經執行了所有的操作，以提高 JavaScript 的效能。 這樣就無需再摒棄 Prepend和 Append 的 jQuery APIs 了。

技巧 #4 – 使用Minification儲存位元組 (http://sixrevisions.com/web-development/10-ways-to-improve-your-web-page-performance)

通過刪除字元(標籤，原始碼文件，空格等)而不改變檔案功能的方式減小 JavaScript 文件。

有許多縮小工具可以用來完成這個過程，並且還可以將縮小復原。 縮小是從原始碼中刪除所有不必要的字元而不改變其功能的過程。

技巧 #5 – 除非必要，否則不要使用巢狀迴圈 減少不必要的迴圈，例如 for 和 while 迴圈，以保持 JavaScript 的線性，並避免需要遍歷數千個物件。無用的迴圈可能會導致瀏覽器處理程式碼時更困難，從而減緩速度。

技巧 #6 – 快取物件以提高效能 很多時候，會重複使用指令碼來訪問某個物件。 將重複訪問的物件儲存在使用者定義的變數中，並且之後在引用該物件時使用此變數，可以立刻實現效能提升。

技巧 #7 – 使用.js檔案來快取指令碼 (http://www.javascriptkit.com/javatutors/efficientjs.shtml)

使用這種技術可以實現效能提升，因為它允許瀏覽器只載入指令碼一次，當頁面被重新載入或重新訪問時只需要從快取中呼叫指令碼即可。

技巧 #8 – 將JavaScript放置到頁面的底部 將指令碼儘可能放在頁面底部的位置會加快渲染進度，同時也會增加下載並行度。 其結果是頁面看起來載入得更快了，並且在某些情況下，它也可以減少所需要的總的程式碼量。

技巧 #9 – 使用jQuery作為框架 jQuery 用於 HTML 指令碼程式設計，是一個易於使用的 JavaScript 庫，可以幫助任何網站實現加速。 jQuery 提供了大量可以快速使用的外掛，即使是新手程式設計師也不成問題。

技巧 #10 – 使用Gzip壓縮檔案 (http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website)

使用 GZip 可以明顯地降低 JavaScript 檔案的大小，節省頻寬，並加快響應時間。 有時 JavaScript 檔案非常大，如果沒有經過壓縮，它可能會造成網站癱瘓。較小的檔案能提供更快、更令人滿意的網頁體驗。

技巧 #11 – 不要使用With關鍵字 (http://blogs.msdn.com/b/ie/archive/2006/08/28/728654.aspx)

“With”這個關鍵詞被認為是害群之馬，因為它本身存在一些讓人倍感沮喪的缺陷。雖然有了它使用區域性屬性的過程會變得更加簡單，但當在其他作用域中查詢變數時，使用With會增大代價。

技巧 #12 – 儘量減少對HTTP的請求 (http://www.websiteoptimization.com/speed/tweak/http)

通過結合外部檔案和直接在 XHTML 頁面中嵌入 JavaScript 來儘量減少對 HTTP 返回頁面的請求。 每一個特定的 HTTP 請求傳輸至伺服器端都會導致大量的時延。

技巧 #13 – 實現事件代理 使用事件代理將會使利用單個事件處理程式來為整個頁面管理某種事件型別變得更加容易。 如果不使用事件代理，大型的 Web 應用程式可能會由於過多的事件處理程式而停止工作。 實現事件代理的好處包括： 需要管理的功能更少，程式碼和 DOM 之間的聯絡更少，程式所需的記憶體更少。

技巧 #14 – 不要重複使用相同的指令碼 (http://www.abhishekbharadwaj.com/2010/12/speed-up-your-website-avoid-duplicate-scripts)

重複的指令碼對效能會造成顯著的影響。重複的指令碼會建立不需要的HTTP請求，尤其是在IE瀏覽器中。在HTML頁面中使用指令碼標籤，可以幫助避免意外地生成重複的指令碼。

技巧 #15 – 移除雙美元符號$$ (http://www.mellowmorning.com/2008/05/18/javascript-optimization-high-performance-js-apps)

當考慮提升網站的速度時，使用雙美元符號$$並不是必要的選擇。

技巧 #16 – 建立變數引用 (http://mondaybynoon.com/2009/04/27/a-couple-of-quick-tips-for-javascript-optimization)

當需要重複使用某個節點時，最好為該節點定義一個變數，使用節點時對變數進行引用，而不是反覆來回操作。針對少量這樣的節點，也許這並不能顯著地提升效能，但是在節點數量很大時，這種方法就可以帶來明顯的影響。

技巧 #17 – 提高Object Detection的速度 (http://dean.edwards.name/weblog/2005/12/js-tip1)

一種更有效的使用 Object Detection 的方法是使用基於物件檢測而動態建立的程式碼，而不是在函式內部去執行物件檢測。

技巧 #18 – 編寫有效的迴圈 (http://robertnyman.com/2008/04/11/javascript-loop-performance)

根據瀏覽器的不同，不同的迴圈實現方法也會對網站的效能產生很大的影響。 編寫不正確的迴圈可能會降低那些具有大訪問量的頁面的響應速度，或者導致同時執行多個迴圈。

技巧 #19 – 縮短作用域鏈 全域性作用域通常較慢，因為每次執行函式的時候，它會引發建立一個臨時的呼叫作用域，JavaScript 會在作用域鏈中搜尋第一個物件，如果找不到該變數，則會遍歷鏈直到搜尋到全域性物件。

技巧 #20 – 對NodeLists直接索引 NodeLists 是動態的，會佔用大量的記憶體，因為當底層的文件物件更改時它們也會被更新。 直接對列表進行索引會速度更快，因為此時瀏覽器不需要建立節點列表物件。

技巧 #21 – 不要使用‘eval’ 雖然“eval”函式是執行任何程式碼的好方法，但是在實際執行時，傳遞給 eval 函式的每個字串都需要進行解析和執行。 每次呼叫eval函式的時候，都會引入這些時間開銷。

技巧 #22 – 使用函式內聯 (https://dl.acm.org/citation.cfm?id=844097)

函式內聯有助於減少函式呼叫的成本，並用被呼叫的函式體替換函式呼叫。 在 JavaScript 中執行函式呼叫是一個高成本的操作，因為需要執行幾個準備步驟：為引數分配空間，複製引數以及解析函式名稱。

技巧 #23 – 實現 Common Sub-expression Elimination (CSE) (http://sunilkumarn.wordpress.com/2010/10/19/common-subexpression-elimination-cse)

Common Sub-expression Elimination (CSE)是一種以效能為目標的編譯器優化技術，用於搜尋相同的表示式物件，並用儲存著計算值的單個變數替換它們。可以認為，對通用子表示式使用單個的區域性變數總是比保持程式碼不變具有更快的速度。

技巧 #24 – 離線構建DOM節點以及所有子節點 當向站點新增複雜的內容(例如表格)時，通過離線的方式新增複雜的子樹可以提升效能。

技巧 #25 – 儘量不要使用全域性變數 由於指令碼引擎需要搜尋作用域，所以當從函式內部或其他作用域內引用全域性變數時，如果區域性作用域丟失，全域性變數將被銷燬。如果全域性作用域中的變數並不一直存在於指令碼的生命週期，則可以提升效能。

技巧 #26 – 使用原始的函式操作而不使用函式呼叫 通過使用等效的原函式而非函式呼叫，可以在對效能有關鍵影響的迴圈和函式中實現速度提升。

技巧 #27 – 不要一直保留對其他文件的引用 (http://dev.opera.com/articles/view/efficient-javascript/?page=4#docreferences)

當指令碼結束後不再保留對其他文件的引用可以實現更快的效能。因為對其他文件中的物件進行的任何引用不會被儲存在整個 DOM 樹中，並且指令碼環境也不會一直保留在記憶體中。 因此文件本身不用再被載入。

技巧 #28 – 使用XMLHttpRequest (http://dev.opera.com/articles/view/efficient-javascript/?page=4#docreferences)

XMLHttpRequest 有助於減少來自伺服器端的內容數量，並且避免在頁面載入的間隙銷燬和重新建立指令碼環境對效能造成的影響。一定要確保支援 XMLHttpRequest，否則可能會導致問題和混淆。

技巧 #29 – 避免使用try-catch-finally結構 (http://dev.opera.com/articles/view/efficient-javascript/?page=2)

每當執行 catch 子句時，捕獲的異常物件被分配給一個變數，“try-catch-finally”會在執行時在當前作用域中建立一個新變數。 許多瀏覽器不能有效地處理這個過程，因為變數是在執行時被建立和銷燬的。避免使用它!

技巧 #30 – 不要誤用 for-in (http://dev.opera.com/articles/view/efficient-javascript/?page=2)

由於“for-in”迴圈需要指令碼引擎構建包含所有可列舉屬性的列表，因此 for 迴圈內的程式碼是不會修改這個列表的。 在 for 迴圈內部，預先計算出列表的長度並賦給變數 len，然後進行迭代。

後續我們還會發布有關效能管理的系列帖子...敬請關注!

Browser Insight 是一個基於真實使用者的 Web 前端效能監控平臺，能夠幫大家定位網站效能瓶頸，網站加速效果視覺化；支援瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術文章，請訪問 OneAPM 官方技術部落格。