JavaScript基礎概念之----性能優化

1、加載與執行

1. body閉合標籤以前，將全部的script標籤放到頁面的底部，能確保在腳本執行前頁面已經完成渲染
2. 合併腳本，頁面中script標籤越少，加載越快，響應也更迅速
3. 使用多種無阻塞下載Javascript方法：

• • 使用script標籤的defer屬性
  • 使用動態建立script元素來下載並執行代碼
  • 使用XHR對象下載 Javascript代碼並注入頁面中

2、數據存取

• 訪問字面量和局部變量的速度最快，相反，訪問數組和對象相對較慢
• 因爲局部變量存在於做用域的起始位置，所以訪問局部變量比訪問跨做用域變量更快。變量在做用域鏈中的位置越深，訪問所需時間越長，因爲全局變量總處在做用域鏈的最末端，所以訪問速度最慢
• 避免使用 with 語句，由於它會改變執行環境做用域鏈。一樣，try-catch語句中的catch子句也有一樣的影響
• 嵌套的對象成員會明顯影響性能，儘可能少用
• 屬性或方法在原型鏈中的位置越深，訪問它的速度也越慢
• 經過把經常使用的對象，數組，跨域變量保存在局部變量中，來改善javascript的性能，由於局部變量訪問速度最快

3、DOM編輯

• 最小化 DOM 訪問次數，儘量在javascript端處理
• 若是須要屢次訪問某個DOM節點，請使用局部變量存儲它的引用
• 當心處理HTML集合，由於它實時連繫着底層文檔。把集合的長度緩存到一個變量中，並在迭代中使用它。若是須要常常操做集合，建議把它拷貝到一個數組中
• 若是可能的話，使用速度更快的API，好比 querySelectorAll() 和 firstElementChild
• 要留意重繪和重排，批量修改樣式時，‘離線’操做DOM樹，使用緩存，並減小訪問佈局信息的次數
• 使用事件委託來減小事件處理器的次數

4、算法和流程控制

• for、while和do-while循環性能特性至關，並無一種循環類型明顯快於或慢於其餘類型
• 避免使用 for-in 循環，除非你須要遍歷一個屬性數量未知的對象
• 改善循環性能的最佳方式是減小每次迭代的運算量和減小循環迭代次數
• 一般來講，swich 老是比 if-else 塊，但並不老是最佳解決方案
• 在判斷條件較多時，使用查找表比 if-else 和 switch 更快
• 瀏覽器的調用棧大小限制了遞歸算法在 javascript 中的應用，棧溢出錯誤會致使其餘代碼中斷運行
• 若是你遇到棧溢出錯誤，可將方法改成迭代算法，或使用 Memoization 來避免重複計算

5、字符串和正則表達式

• 當鏈接數據巨大或尺寸巨大的字符串時，數組項合併是惟一在IE7及更早版本中性能合理的方法
• 若是不須要考慮IE7及更早版本的性能，數組項合併是最慢的字符串鏈接方法之一。推薦使用簡單的+和+=操做符替代，避免沒必要要的中間字符串
• 回溯既是正則表達式匹配功能的基本組成部分，也是正則表達式的低效之源
• 回溯失控發生在正則表達式本應快速匹配的地方，但由於某些特殊的字符串匹配動做致使運行緩慢甚至瀏覽器崩潰。避免這個問題的辦法是：使相鄰的字元互斥，避免嵌套量詞對同一字符串的相同部分屢次匹配，經過重複利用預查的原子組去除沒必要要的回溯
• 提升正式表達式效率的各類技術手段會有助於正則表達式更快地匹配，並在非匹配位置上花更少的時間
• 正則表達式並不老是完成工做的最佳工具，尤爲當你只搜索字面字符串的時候
• 儘管有許多方法能夠去除字符串的首尾空白，但使用兩個簡單的正則表達式（一個去除頭部空白，一個去除尾部空白）來處理大量字符串內容能提供一個簡潔而跨瀏覽器的方法。從字符串末尾開始循環向前搜索第一個非空白字符，或者將此技術同正則表達式結合起來，會提供一個更好的替代方案，它不多受到字符串長度影響

6、快速響應的用戶界面

• 任何 Javascript 任務都不該當執行超過 100 毫秒。過長的運行時間會致使 UI 更新出現明顯的延遲，從而對用戶體驗產生負面影響
• Javascript 運行期間，瀏覽器響應用戶交互的行爲存在差別。不管如何，Javascript 長時間運行將致使用戶體驗變得混亂和脫節
• 定時器可用來安排代碼延遲執行，它使得你能夠把長時間運行腳本分解成一系列的小任務
• Web Workers 是新版瀏覽器支持的特性，它容許你在 UI 線程外部執行 Javascript 代碼，從而避免鎖定 UI

7、Ajax

• 瞭解項目的具體需求，選擇正確的數據格式和與之匹配的傳輸技術
• 做爲數據格式，純文本和HTML只適用於特定場合，但它們能夠節省客戶端的CPU週期。XML被普遍應用且支持性良好，可是它十分笨重且解析緩慢。JSON是輕量級的，解析速度快，通用性與XML至關。字符分隔的自定義格式十分輕量，在解析大量數據集時很是快，但須要編寫額外的服務器構造程序，並在客戶端解析。
• 從頁面當前所處的域下請求數據時，XHR提供了最完善的控制和靈活性，儘管它會把接收到的全部數據當成一個字符串，且這有可能下降解析速度。另外一方面，動態腳本注入容許跨域請求和本地執行Javascript和JSON，可是它的接口不那麼安全，並且還不能讀取頭信息或響應代碼。Multipart XHR 能夠用來減小請求數，並處理一個響應中的各類文件類型，可是它不能緩存接收到的響應。當須要發送數據時，圖片信標是一種簡單而有效的方法。XHR能夠用POST方法發送大量數據。
• 減小請求數，能夠經過合併javascript和css文件，或使用MXHR
• 縮短頁面的加載時間，頁面主要內容加載完成後，用Ajax獲取那些次要的文件
• 確保你的代碼錯誤不會輸出給用戶，並在服務器端處理錯誤
• 知道什麼時候使用成熟的Ajax類庫，以及什麼時候編寫本身的底層 Ajax代碼

8、編程實踐

• 經過避免使用eval() 和 Function() 構造器來避免雙重求值帶來的性能消耗。一樣的，給setTimeout() 和 setInterval()傳遞函數 而不是 字符串 做爲參數
• 儘可能直接使用直接量建立對象和數組。直接量的建立和初始化都比非直接量形式要快
• 避免作重複的工做，當須要檢測瀏覽器時，可以使用延遲加載或條件預加載
• 在進行數學計算時，考慮使用直接操做數字的二進制形式的位運算
• Javascript 在原生方法 總會比本身寫的任何代碼都要快。儘可能使用原生方法

9、部署

• 合併javascript文件以減小HTTP請求數
• 壓縮 Javascript文件
• 在服務器端壓縮 Javascript文件
• 經過正確設置HTTP響應頭來緩存 Javascript文件，經過向文件名增長時間戳來避免緩存問題
• 使用CDN提供Javascript文件；CDN不只能夠提高性能，它也爲你管理文件的壓縮和緩存

10、工具

• 使用網絡分析工具找出加載腳本和頁面中共他資源的瓶頸，這會幫助你決定哪些腳本須要延遲加載，或者須要進一步分析
• 儘管傳統的經驗告訴咱們要儘可能減小HTTP請求數，但把腳本儘量延遲加載能夠加快頁面渲染速度，給用戶帶來更好的體驗
• 使用性能分析工具找出腳本運行過程當中速度慢的地方，檢查每一個函數所消耗的時間，以及函數被調用的次數，經過調用棧自身提供的一些線索來找出須要集中精力優化的地方
• 儘管耗費的時間和調用次數一般是數據中最有價值的部分，但仔細觀察函數的調用過程，你也許會發現其餘優化目標