在我們開發的過程中，應該始終考慮性能。而本文列舉了有效提高系統性能的12個方法，如果朋友們有更多的技巧請在吳小迪的博客下方評論，謝謝。



性能是創建網頁或應用程序時最重要的一個方面。沒有人想要應用程序崩潰或者網頁無法加載，或者用戶的等待時間很長。根據Kissmetrics，47%的訪問者希望網站在不到2秒的時間內加載，如果加載過程需要3秒以上，則在40%的訪問者會離開網站。



考慮到以上這些數字，你在創建Web應用程序時應始終考慮性能。為了幫助你開始，以下提供了有效提高應用程序性能的12種方法：



一：在瀏覽器中緩存

要這樣做有倆種選擇。第一種是使用JavaScript Cache API，我們可以安裝service worker來使用它。第二種是使用HTTP協議緩存。



訪問某個對象通常要用腳本。通過把重復訪問的對象存儲在用戶定義的變量中，以及在后續對該對象的引用中使用變量，可以立即實現性能的提升。



二：定義執行的上下文

為了有效地衡量你在程序中加入的任何改進，你必須創建一組定義良好的環境，以便測試代碼性能。



對所有JavaScript引擎的所有版本進行性能測試和優化實際上是不可行的。但是，在單一的環境中進行測試并非一個好習慣，因為你可能會得到片面的結果。因此，建立多個定義良好的環境并測試代碼是否有效非常重要。



三：刪除未使用的JavaScript

此步驟不僅會縮短傳輸時間，還會縮短瀏覽器分析和編譯代碼所需的時間。為此，你必須考慮以下幾點：



如果你檢測到一個用戶未使用的功能，最好刪除所有與之相關的JavaScript代碼，這樣網站的加載速度會更快，用戶也有更好的體驗。

還有可能，你錯誤地加入了一個并不需要的庫，或者你有依賴項，這些依賴項提供的功能在所有瀏覽器中原本就有，那么你無需再增加多余的代碼。

四：避免使用太多內存

你應該始終給內存加一條限制，那就是只有絕對必須的內容才能使用內存，因為你無法知道運行應用程序的設備到底需要多少內存。只要你的代碼要求瀏覽器保留新的內存，瀏覽器的垃圾收集器就會被執行，并停止JavaScript的運行。如果經常發生這種情況，頁面將變慢。



五：推遲不必要的JS加載

用戶希望頁面快速加載，但并非所有函數都需要在頁面的初始加載時就可用。如果用戶必須執行某個操作才能執行某個函數（例如，通過單擊某個元素或更改選項卡），那么你可以將該函數的加載推遲到初始頁面加載之后。



通過這種方式，你可以避免加載和編譯那些會延遲頁面初始顯示的 JavaScript 代碼。頁面完全加載后，我們可以再開始加載這些功能，以便它們在用戶開始交互時立即可用。在 RAIL 模型中，Google 建議將此延遲加載以 50 毫秒為單位進行，這樣就不會影響用戶與頁面的交互。



六：避免內存泄漏

如果內存正在泄漏，則加載的頁面將保留越來越多的內存，并最終占用設備的所有可用內存并嚴重影響性能。你可能見過此類故障（并且可能對此類故障感到懊惱），例如在帶有輪播或圖像滑動條的頁面上。



在 Chrome 開發者工具中，你可以通過在“性能”標簽中記錄時間線來分析你的網站是否存在內存泄漏。通常，內存泄漏的原因是，你從頁面中刪除了 DOM，但有一些變量還在引用這些 DOM，因此，垃圾收集器無法消除它們。



七：適當的使用Web worker

當你執行耗時很長的代碼時，請使用 Web worker。根據 Mozilla 開發人員網絡 (MDN) 文檔：“Web Worker 可以在與 Web 應用程序的主執行線程分開的后臺線程中運行腳本操作。這樣做的好處是你可以在一個單獨的線程中執行耗時又費力的的處理，同時讓主（通常為 UI）線程運行而不被阻塞或減慢。”



Web worker 允許代碼執行處理器密集型計算，而不阻塞用戶界面線程。Web Worker 允許你生成新線程并將工作委托給這些線程以獲得的性能。這樣，通常會阻礙其他任務且需要長時間運行的任務將被傳遞給 worker，從而讓主線程可以在無阻礙的情況下運行。



八：適當將DOM元素保存在局部變量中

訪問 DOM 會很慢。如果要多次讀取某元素的內容，最好將其保存在局部變量中。但記住重要的是，如果稍后你會刪除 DOM 的值，則應將變量設置為“null”，不然會導致內存泄漏。



九：優先訪問局部變量

JavaScript 首先搜索以查看變量是否存在于本地，然后才在更高級別的作用域內逐步搜索到全局變量為止。將變量保存在本地作用域內能讓 JavaScript 更快地訪問它們。



局部變量是基于最具體的作用域的，并且可能會穿過多個級別的作用域，因此查找這一動作可能導致出現通用的查詢。在一個它前面沒有變量聲明的局部變量中定義函數作用域時，需要在每個變量之前加上 let 或 const，以便定義當前作用域，防止查找并加速代碼執行。



十：避免使用全局變量

因為腳本引擎在從函數或其他作用域內引用全局變量時需要逐一查看作用域，所以當本地作用域丟失時，該變量將被銷毀。如果全局作用域中的變量無法在腳本的生命周期內持續存在，則性能將得到改善。



十一：實施一些優化方案

始終使用計算復雜度的算法和最佳的數據結構來解決任務。



重寫算法以獲得相同的結果和更少的計算。



避免遞歸調用。



給重復的函數加入變量、計算和調用。



分解和簡化數學公式。



使用搜索數組：用它們來獲取基于另一個的值，而不是使用 switch/case 語句。



使條件總是更有可能為真，以更好地利用處理器的推測執行。



如果可以，請使用位級運算符替換某些操作，因為這些運算符的處理周期較短。



十二：使用工具檢測問題

Lighthouse 是一個很好的網頁性能工具，它可以幫助你審核性能、可訪問性、最佳實踐和 SEO。谷歌 PageSpeed 旨在幫助開發人員了解網站的性能優化和潛在可改進的方面。這些組件旨在識別網站是否符合 Google Web 性能最佳實踐，以及將調整過程自動化。



在 Chrome 中，你還可以使用主菜單中的“更多工具”選項來查看每個選項卡使用的內存和 CPU。對于更高級的分析，你可以使用 Firefox 或 Chrome 中的開發人員工具“性能”視圖來分析不同的指標，例如：





devtools 的性能分析允許你在加載頁面時模擬 CPU 消耗、網絡和其他指標，以便識別和修復問題。





為了更深入地了解，建議你使用 JavaScript Navigation Timing API，它允許你詳細測量代碼的每個部分從編程本身中獲取的內容。



對于基于 Node.js 構建的應用程序，NodeSource Platform 也是一種非常好、影響低的方式，它可以在非常精細的級別上探索應用程序性能。



全面的 Node.js 指標可幫助你識別內存泄漏源或其他性能問題，并更快地解決這些問題。



最后的說明在代碼的可讀性和優化之間保持平衡很重要。代碼由計算機解釋，但我們需要確保代碼將來可以由我們自己或其他人維護，因此它們需要易于理解。



請記住：應始終考慮性能，但不應將性能凌駕于錯誤檢測和功能添加之上。

藍藍設計( www.dzxscac.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。