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

一、加載與執行

1. body閉合标簽之前，将所有的script标簽放到頁面的底部，能確定在腳本執行前頁面已經完成渲染
2. 合并腳本，頁面中script标簽越少，加載越快，響應也更迅速
3. 使用多種無阻塞下載下傳Javascript方法：

• • 使用script标簽的defer屬性
  • 使用動态建立script元素來下載下傳并執行代碼
  • 使用XHR對象下載下傳 Javascript代碼并注入頁面中

二、資料存取

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

三、DOM編輯

• 最小化 DOM 通路次數，盡可能在javascript端處理
• 如果需要多次通路某個DOM節點，請使用局部變量存儲它的引用
• 小心處理HTML集合，因為它實時連系着底層文檔。把集合的長度緩存到一個變量中，并在疊代中使用它。如果需要經常操作集合，建議把它拷貝到一個數組中
• 如果可能的話，使用速度更快的API，比如 querySelectorAll() 和 firstElementChild
• 要留意重繪和重排，批量修改樣式時，‘離線’操作DOM樹，使用緩存，并減少通路布局資訊的次數
• 使用事件委托來減少事件處理器的次數

四、算法和流程控制

• for、while和do-while循環性能特性相當，并沒有一種循環類型明顯快于或慢于其他類型
• 避免使用 for-in 循環，除非你需要周遊一個屬性數量未知的對象
• 改善循環性能的最佳方式是減少每次疊代的運算量和減少循環疊代次數
• 通常來說，swich 總是比 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方法發送大量資料。
• 減少請求數，可以通過合并javascript和css檔案，或使用MXHR
• 縮短頁面的加載時間，頁面主要内容加載完成後，用Ajax擷取那些次要的檔案
• 確定你的代碼錯誤不會輸出給使用者，并在伺服器端處理錯誤
• 知道何時使用成熟的Ajax類庫，以及何時編寫自己的底層 Ajax代碼

八、程式設計實踐

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

九、部署

• 合并javascript檔案以減少HTTP請求數
• 壓縮 Javascript檔案
• 在伺服器端壓縮 Javascript檔案
• 通過正确設定HTTP響應頭來緩存 Javascript檔案，通過向檔案名增加時間戳來避免緩存問題
• 使用CDN提供Javascript檔案；CDN不僅可以提升性能，它也為你管理檔案的壓縮和緩存

十、工具

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

轉載于:https://www.cnblogs.com/adhehe/p/9812178.html