在我們開發(fā)的過程中，應(yīng)該始終考慮性能。而本文列舉了有效提高系統(tǒ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種方法：



一：在瀏覽器中緩存

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



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



二：定義執(zhí)行的上下文

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



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



三：刪除未使用的JavaScript

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



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

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

四：避免使用太多內(nèi)存

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



五：推遲不必要的JS加載

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



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



六：避免內(nèi)存泄漏

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



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



七：適當(dāng)?shù)氖褂肳eb worker

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


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



八：適當(dāng)將DOM元素保存在局部變量中

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



九：優(yōu)先訪問局部變量

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



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



十：避免使用全局變量

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



十一：實施一些優(yōu)化方案

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



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



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



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



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



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



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



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



十二：使用工具檢測問題

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



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





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





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



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



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



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



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

藍藍設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。