高性能javascript小結

高性能javascript小結

文章轉載於個人CSDN博客：http://blog.csdn.net/hello_world_20/article/details/46793317

最近看完了動物叢書的《高性能javascript》，以爲那本書的小結部分寫得很是不錯，簡潔、輕快易懂、歸納性很強。無奈書是圖書館借的，網上也沒有相似的總結，因此寫篇博客，記錄下來，也但願可以幫助到你們。

• 第一章：減小javascript對性能的影響：

  • </body> 閉合標籤以前，將全部的 <script> 標籤放到頁面底部。這能確保在腳本執行前頁面已經完成了渲染。否則 script 標籤會阻塞頁面的渲染。

  • 合併腳本。頁面中的 script 標籤越少，加載也就越快，響應也更迅速。不管外鏈文件仍是內嵌腳本都是如此。由於每一次 script 外部文件都會有一次HTTP請求

  • 有多中無阻塞下載javascript的方法

    • 使用defer屬性

    • 使用動態建立的 script 元素來下載並執行代碼。

    • 使用XHR對象下載javascript代碼並注入頁面中

• 第二章：數據訪問

  • 對象成員的嵌套也會開銷系統資源。location.href永遠會比window.location.href快。

  • 訪問直接量和局部變量的速度最快，相反，訪問數組元素和對象成員相對較慢。

  • 因爲局部變量存在於做用域鏈的起始位置，所以訪問局部變量比訪問跨做用域變量更快。變量在做用域鏈中的位置越深，訪問所需時間就越長。因爲全局變量總處在做用域鏈的最末端，所以訪問速度也是最慢的。

  • 避免使用with語句，由於它會改變運行期上下文做用域鏈。一樣，try-catch語句中的catch子句也有一樣的影響，所以要當心使用。

  • 嵌套的對象成員會明顯影響性能，儘可能少用

  • 屬性或方法在原型鏈中的位置越深，訪問它的速度也越慢。

  • 局部一般來講，你能夠經過把經常使用的對象成員、數組元素、跨域變量保存在變量中來改善javascript的性能，由於局部變量訪問速度最快。

• 第三章：DOM編程

  • 最小化DOM訪問次數，儘量在javascript端處理

  • 若是須要屢次訪問某個DOM節點，請使用局部變量存儲它的引用

  • 當心處理HTML集合，由於它實時聯繫着底層文檔。把集合的長度緩存到一個變量中，並在迭代中使用它。若是須要常常操做集合，建議把它拷貝到一個數組中。

  • 若是可能的話，使用速度更快的API，好比querySelectorAll()和firstElementChild()

  • 要留意重繪和重排；批量修改樣式時，「離線」操做DOM樹，使用緩存，並減小訪問佈局信息的次數。

  • 動畫中使用絕對定位，使用拖放代理

  • 使用事件委託來減小事件處理器的數量

• 第四章：算法和流程控制

  • for、while和do-while循環性能類似，因此沒有一種循環類型明顯快於或慢於其餘類型

  • 避免使用for-in循環，除非你須要遍歷一個屬性數量未知的對象

  • 改善循環性能的最佳方式是減小每次迭代的運算量和減小循環迭代次數

  • 一般來講，switch老是比if-else快，但並不老是最佳解決方案

  • 在判斷條件較多時，使用查找表比if-else和switch更快

  • 瀏覽器的調用棧大小限制了遞歸算法在javascript中的應用；棧溢出錯誤會致使其餘代碼中斷運行

  • 若是你遇到棧溢出錯誤，可將方法改成迭代算法，或使用Memoization來避免重複計算。

• 第五章：字符串和正則表達式

  • 當鏈接數量巨大或尺寸巨大的字符串時，數組項鍊接是惟一在IE7及更早版本中性能合理的方法

  • 若是不考慮IE7及更早版本的性能，數組項鍊接是最慢的字符串鏈接方法之一。推薦使用簡單的+和+=操做符替代，避免沒必要要的中間字符串

  • 回溯既是正則表達式匹配功能的基本組成部分，也是正則表達式的低效之源

  • 回溯失控發生在正則表達式本應該快速匹配的地方，但由於某些特殊的字符串匹配動做致使運行緩慢甚至瀏覽器崩潰。避免這個問題的辦法是：使相鄰的字元互斥，避免嵌套量詞對同一字符串的相同部分屢次匹配，經過重複利用向前查看的原子組去除沒必要要的回溯

  • 提升正則表達式效率的各類技術手段會有助於正則表達式更快地匹配，並在非匹配位置上花更少的時間

  • 正則表達式並不老是完成工做的最佳工具，尤爲當你只搜索字面字符串的時候

  • 儘管有許多方法能夠去除字符串的首尾空白，但使用兩個簡單的正則表達式（一個用來去除頭部空白，另外一個用於去除尾部空白）來處理大量字符串內容能提供一個簡潔而跨瀏覽器的方法。從字符串末尾開始循環向前搜索第一個非空白字符，或者將此技術同正則表達式結合起來，會提供一個更好的替代方案，它不多受到字符串長度的影響

• 第六章：快速響應的用戶界面

  • 任何javascript任務都不該當執行超過100毫秒。過長的運行時間會致使UI更新出現明顯的延遲，從而對用戶體驗產生負面的影響。

  • javascript運行期間，瀏覽器響應用戶交互的行爲存在差別。不管如何，javascript長時間運行將致使用戶體驗變得混亂和脫節

  • 定時器可用來安排代碼延遲執行，它使得你能夠把長時間運行的腳本分解成一系列的小任務

  • Web workers是新版瀏覽器支持的特性，它容許你在UI線程外部執行javascript代碼，從而避免鎖定UI

• 第七章：Ajax

  • 做爲數據格式，純文本和HTML只適用於特定場合，但它們能夠節省客戶端的CPU週期。XML被普遍應用並且支持良好，可是它十分笨重且解析緩慢。JSON是輕量級的，解析速度快（被視爲原生代碼而不是字符串），通用性與XML至關。字符分隔的自定義格式十分輕量，在解析大量數據集時很是快，但須要編寫額外的服務端構造程序，並在客戶端解析。

  • 當從頁面當前所處的域下請求數據時，XHR提供了最完善的控制和靈活性，儘管它會把接收到的全部數據當成一個字符串，且這有可能下降解析速度。另外一方面，動態腳本注入容許跨域請求和本地執行javascript和JSON可是它的接口不那麼安全，並且還不能讀取頭信息或相應代碼。Multipart XHR能夠用來減小請求數，並處理一個響應中的各類文件類型，可是它不能緩存接收到的響應。當須要發送數據時，圖片信標是一種簡單而有效的方法。XHR還能夠用POST方法發送大量數據。

  • 除了這些格式和傳輸技術，還有一些準則有助於加速你的Ajax

    • 減小請求數，可經過合併javascript和CSS文件，或使用MXHR

    • 縮短頁面的加載時間，頁面主要內容加載完成後，用Ajax獲取那些次要的文件

    • 確保你的代碼錯誤不會輸出給用戶，並在服務端處理錯誤

    • 指導什麼時候使用成熟的Ajax類庫，以及什麼時候編寫本身的底層Ajax代碼

• 第八章：編程實踐

  • 經過避免使用eval()和Function()構造器來避免雙重求值帶來的性能消耗。一樣的，給setTimeout()和setInterval()傳遞函數而不是字符串做爲參數

  • 儘可能使用直接量建立對象和數組。直接量的建立和初始化都比非直接量形式要快

  • 避免作重複的工做。當須要檢測瀏覽器時，可以使用延遲加載或條件預加載

  • 在進行數學計算時，考慮使用直接操做數字的二進制形式的位運算

  • javascript的原生方法總會比你寫的任何代碼都要快。儘可能使用原生的方法

• 第九章：構建並部署高性能javascript應用

  • 合併javascript文件以減小HTTP請求數

  • 使用YUN Compressor壓縮javascript文件

  • 在服務器端壓縮javascript文件（Gzip編碼）

  • 經過正確設置HTTP響應頭來緩存javascript文件，經過向文件名增長時間戳來避免緩存問題

  • 使用CDN提供javascript文件，CDN不只能夠提高性能，它也爲你管理文件的壓縮與緩存

• 第十章：工具（截稿時期是2010年）

  • 使用網絡分析工具找出加載腳本和頁面中其餘資源的瓶頸，這回幫助你決定哪些腳本須要加載延遲，或者須要進一步分析

  • 儘管傳統的經驗告訴咱們要儘可能減小HTTP請求數，但把腳本儘量延遲加載能夠加快頁面渲染速度，給用戶帶來更好的體驗

  • 使用性能分析工具照吃腳本運行過程當中速度慢得地方，檢查每一個函數所消耗的時間，以及函數被調用次數，經過調用棧自身提供的一些線索來找出須要集中精力優化的地方

  • 儘管耗費的時間和條用次數一般是數據中最有價值的部分，但仔細觀察函數的調用過程，你也許會發現其餘優化目標