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 官方技術博客。

來源：http://blog.oneapm.com/apm-tech/802.html