作者丨Liz Parody
在創建 Web 應用程序時應始終考慮性能。為了幫助你開始，本文列舉了有效提高應用程序性能的 12 種方法。
性能是創建網頁或應用程序時最重要的一個方面。沒有人想要應用程序崩潰或者網頁無法加載，或者用戶的等待時間很長。根據 Kissmetrics，47％的訪問者希望網站在不到 2 秒的時間內加載，如果加載過程需要 3 秒以上，則有 40％的訪問者會離開網站。
考慮到以上這些數字，你在創建 Web 應用程序時應始終考慮性能。為了幫助你開始，以下提供了有效提高應用程序性能的 12 種方法：
1、在瀏覽器中緩存
要這樣做有兩種選擇。第一種是使用 JAVAScript Cache API，我們可以安裝 service worker 來使用它。第二種是使用 HTTP 協議緩存。
訪問某個對象通常要用腳本。通過把重復訪問的對象存儲在用戶定義的變量中，以及在后續對該對象的引用中使用變量，可以立即實現性能的提升。
2、定義執行的上下文
為了有效地衡量你在程序中加入的任何改進，你必須創建一組定義良好的環境，以便測試代碼的性能。
對所有 JavaScript 引擎的所有版本進行性能測試和優化實際上是不可行的。但是，在單一的環境中進行測試并非一個好習慣，因為你可能會得到片面的結果。因此，建立多個定義良好的環境并測試代碼是否有效非常重要。
3、刪除未使用的 JavaScript
此步驟不僅會縮短傳輸時間，還會縮短瀏覽器分析和編譯代碼所需的時間。為此，你必須考慮以下幾點：
- 如果你檢測到一個用戶未使用的功能，最好刪除所有與之相關的 JavaScript 代碼，這樣網站的加載速度會更快，用戶也會有更好的體驗。
- 還有可能，你錯誤地加入了一個并不需要的庫，或者你有依賴項，這些依賴項提供的功能在所有瀏覽器中原本就有，那么你無需再增加多余的代碼。
4、避免使用太多內存
你應該始終給內存加一條限制，那就是只有絕對必須的內容才能使用內存，因為你無法知道運行應用程序的設備到底需要多少內存。只要你的代碼要求瀏覽器保留新的內存，瀏覽器的垃圾收集器就會被執行，并停止 JavaScript 的運行。如果經常發生這種情況，頁面將變慢。
5、推遲不必要的 JS 加載
用戶希望頁面快速加載，但并非所有函數都需要在頁面的初始加載時就可用。如果用戶必須執行某個操作才能執行某個函數（例如，通過單擊某個元素或更改選項卡），那么你可以將該函數的加載推遲到初始頁面加載之后。
通過這種方式，你可以避免加載和編譯那些會延遲頁面初始顯示的 JavaScript 代碼。頁面完全加載后，我們可以再開始加載這些功能，以便它們在用戶開始交互時立即可用。在 RAIL 模型中，google 建議將此延遲加載以 50 毫秒為單位進行，這樣就不會影響用戶與頁面的交互。
6、避免內存泄漏
如果內存正在泄漏，則加載的頁面將保留越來越多的內存，并最終占用設備的所有可用內存并嚴重影響性能。你可能見過此類故障（并且可能對此類故障感到懊惱），例如在帶有輪播或圖像滑動條的頁面上。
在 Chrome 開發者工具中，你可以通過在“性能”標簽中記錄時間線來分析你的網站是否存在內存泄漏。通常，內存泄漏的原因是，你從頁面中刪除了 DOM，但有一些變量還在引用這些 DOM，因此，垃圾收集器無法消除它們。
