在創(chuàng)建 Web 應(yīng)用程序時應(yīng)始終考慮性能。為了幫助你開始，本文列舉了有效提高應(yīng)用程序性能的 12 種方法。

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

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

　　1、在瀏覽器中緩存

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

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

　　2、定義執(zhí)行的上下文

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

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

　　3、刪除未使用的 JavaScript

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

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

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

　　4、避免使用太多內(nèi)存

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

　　5、推遲不必要的 JS 加載

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

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

　　6、避免內(nèi)存泄漏

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

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

　　7、適當?shù)氖褂?Web worker

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

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

　　8、適當將 DOM 元素保存在局部變量中

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

　　9、優(yōu)先訪問局部變量

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

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

　　10、避免使用全局變量

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

　　11、實施一些優(yōu)化方案

　　始終使用計算復(fù)雜度最低的算法和最佳的數(shù)據(jù)結(jié)構(gòu)來解決任務(wù)。

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

　　避免遞歸調(diào)用。

　　給重復(fù)的函數(shù)加入變量、計算和調(diào)用。

　　分解和簡化數(shù)學(xué)公式。

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

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

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

　　12、使用工具檢測問題

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

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

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

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

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

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

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

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