在我們開發(fā)的過程中，應(yīng)該始終考慮性能。而本文列舉了有效提高系統(tǒng)性能的12個(gè)方法，如果朋友們有更多的技巧請?jiān)趨切〉系牟┛拖路皆u論，謝謝。



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



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



一：在瀏覽器中緩存

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



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



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

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



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



三：刪除未使用的JavaScript

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



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

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

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

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



五：推遲不必要的JS加載

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



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



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

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



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



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

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


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



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

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



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

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



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



十：避免使用全局變量

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



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

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



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



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



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



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



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



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



如果可以，請使用位級運(yùn)算符替換某些操作，因?yàn)檫@些運(yùn)算符的處理周期較短。



十二：使用工具檢測問題

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



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





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





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



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



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



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



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

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