在一些年以前性能問題，我們前端開發能做的還是很有限的；不過隨著 JAVAScript 應用越來越復雜，優化 JavaScript 性能的重要性就越發的凸顯出來了。這里我分享 8 個提高 JavaScript 性能的方法。
入題
1. 盡可能的緩存
我們知道緩存一些資源或者結果是為了減少再次獲得這些資源所需要的時間，所以這是一條很常見的通識。
有兩種選擇。
- 第一種是使用 JavaScript Cache API，我們可以使用 service worker。
- 第二種是使用 HTTP 協議緩存。
通過把重復訪問的對象存儲在用戶定義的變量中，以及在后續對該對象的引用中使用變量，可以立即實現性能的提升。
2. 延遲不必要的 JS 首屏加載
我們希望頁面的加載時間能不讓用戶焦慮，推遲不必要的 JS 首屏加載是一個很好地方法。
程序中不是所有函數都需要在頁面的初始加載時就要用到。有很多是用戶必須執行某個操作才能執行某個函數，那么你可以將該函數的加載推遲到初始頁面加載之后。
一些通用方法
- 使用 defer 和 async 屬性
- 使用類似 getScript() 方法
- 動態創建 DOM 方式
- 使用延時器
function loadScript (src, onload) {
var scriptTag = document.createElement("script");
scriptTag.src = src;
if (typeof onload === "function") {
scriptTag.onload = onload;
scriptTag.onreadystatechange = function () {
if (scriptTag.readyState === 4) {
onload();
}
}
}
document.body.AppendChild(scriptTag);
}
復制代碼
3. 刪除未使用的 JavaScript
這個步驟是十分必要的，很多人在不使用某些代碼的時候僅僅只是注釋掉；因為他們生怕產品經理又反悔。 其實你刪除這些代碼，不僅會縮短傳輸時間，還會縮短瀏覽器分析和編譯代碼所需的時間。
提供幾點作為參考：
- 未使用的代碼直接刪掉，就算后期產品返回，你也可以在 git 歷史中找回來。
- 一些常用的方法不要在自己寫一遍，團隊一定要有一個常用方法的公共庫；公用方法都應該寫入這個公共庫，而不是寫在業務代碼里面。
- 不要因為一個小功能就引入一個第三方插件/庫，你可以使用模塊化的方式引入，或者自己寫一個類似的方法放在項目的公共庫中。
4. 避免內存泄漏
如果內存正在泄漏，則加載的頁面將保留越來越多的內存，并最終占用設備的所有可用內存并嚴重影響性能。你可能見過此類故障（并且可能對此類故障感到懊惱），例如輪播。
在 Chrome 開發者工具中，你可以通過在“Performance ”標簽中記錄時間線來分析你的網站是否存在內存泄漏。
若內存占用基本平穩，就說明不存在內存泄漏，反之便是存在。
幾種常見的內存泄漏原因：
- 意外的全局變量
- 沒有銷毀的計時器
- 已經刪除的 DOM 還是被引用，（刪除 DOM 后將變量設值為 null 可以避免這個問題）
5. 避免使用全局變量 & 優先使用局部變量
這一點主要是想說定義變量的時候用最近原則，即可以在當前作用域定義的變量就一定不要定義在上一級，更不要一股腦的直接定義在全局。也就是縮短作用域鏈的查找長度。
我們知道 JS 查找變量是按照作用域鏈查找的，多查找一層勢必會多一點處理時間。定義在當前作用域可以加快代碼的執行速度。
當作用域丟失時，該作用域的變量將被銷毀。
6. 使用 web workers 處理需要大量執行時間的代碼
web workers 使 Web 應用程序的主執行線程分開的后臺線程中運行腳本操作成為可能。這樣做的好處是，可以在單獨的線程中執行費力的處理，允許主線程(通常是UI)運行，而不會阻塞/減慢速度。
web workers 的幾個使用場景
- 預取數據 — 優化網站的加載時間，可用 web workers 來提前加載數據。
- 輪詢工作
7. 合理使用事件代理
我們知道事件代理可以合并類似的操作，可以直接降低與 DOM 的交互。使用事件代理的優點就可想而知了：
- 節約內存空間，性能自然提升（合并的函數占用內存比優化前少多了）
- 減少 DOM 操作（優化性能，減少 DOM 操作一直很重要，這也是 Virtual Dom 流行的幾個基本原因）
8. 將重復的代碼一定抽象成函數
我們在寫代碼的時候，有一些代碼會在很多模塊中出現。有些人會覺得不以為然，這樣不會消耗太多的性能，也就沒有抽象出來。
其實這是必要的，這樣做的目的是：
- 是你的項目具有更高的可讀性和擴展性，并且團隊協作更加融洽
- 減少代碼的解析和編譯的時間
其他
還有一些諸如代碼壓縮、使用 CDN、合并代碼、Gzip、減少 HTTP 請求、DOM操作優化、圖片優化等也是優化性能的常見方法，不過這些都更加偏向前端工程一些。所以這里只是總結了一些優化 JavaScript 代碼性能的方法。
