應(yīng)始終保持代碼的可讀性與其優(yōu)化之間的平衡。您絕不應(yīng)該在應(yīng)用程序開發(fā)期間損害其性能。為了縮短上市時(shí)間而匆忙完成整個(gè)過程將使事情變得更加復(fù)雜。

性能是任何Web應(yīng)用程序成功（或失?。┑臎Q定因素。頻繁的網(wǎng)絡(luò)崩潰和漫長的等待時(shí)間使訪問者感到煩惱。

Kissmetrics發(fā)現(xiàn)：

1. 47％的訪問者希望網(wǎng)站在不到2秒的時(shí)間內(nèi)加載。

2. 如果加載過程超過3秒，則有40％的訪問者會(huì)離開網(wǎng)站。

我將告訴您9條提示，您可以使用這些提示注意到應(yīng)用程序性能的多項(xiàng)改進(jìn)。讓我們開始吧。

刪除未使用的JavaScript

它不僅減少了傳輸時(shí)間，還減少了瀏覽器分析和編譯代碼所花費(fèi)的時(shí)間。在刪除未使用的JavaScript時(shí)，應(yīng)考慮以下幾點(diǎn)：

1. 如果檢測(cè)到用戶未使用的功能，則將其及其關(guān)聯(lián)的JavaScript代碼一起全部刪除。

2. 如果一個(gè)庫被錯(cuò)誤地包括進(jìn)來并且不是必需的，則也將其刪除。

在瀏覽器中緩存

您可以通過兩種方式在瀏覽器中進(jìn)行緩存。第一種選擇是通過安裝服務(wù)工作程序來使用JavaScript緩存API。其次，您可以使用HTTP協(xié)議緩存。

開發(fā)人員使用腳本來提供對(duì)特定對(duì)象的訪問。通過將此類對(duì)象存儲(chǔ)在用戶定義的變量的內(nèi)存中，并在對(duì)該對(duì)象的后續(xù)引用中使用變量，您會(huì)發(fā)現(xiàn)性能立即得到改善。

避免內(nèi)存泄漏

Java虛擬機(jī)（JVM）在應(yīng)用程序的生命周期中不斷對(duì)其進(jìn)行分析，并檢測(cè)不再使用的對(duì)象。這些對(duì)象被收集為垃圾。內(nèi)存泄漏是JVM無法識(shí)別未使用的對(duì)象，從而導(dǎo)致系統(tǒng)中垃圾堆積的一種情況。

在內(nèi)存泄漏期間，加載的頁面將逐漸占用設(shè)備的所有可用內(nèi)存，并嚴(yán)重影響性能。

在Chrome開發(fā)工具中，可以通過在“效果”標(biāo)簽中記錄時(shí)間軸來分析內(nèi)存泄漏。

建立定義明確的測(cè)試環(huán)境

作為開發(fā)人員，您需要在應(yīng)用程序上線之前對(duì)其進(jìn)行測(cè)試，并且測(cè)試代碼需要一組明確定義的環(huán)境。

對(duì)所有Javascript引擎的所有版本進(jìn)行性能測(cè)試和優(yōu)化都是不切實(shí)際的。另一方面，如果在單個(gè)環(huán)境中進(jìn)行測(cè)試，則會(huì)得到部分結(jié)果。

因此，您應(yīng)該更進(jìn)一步地建立良好定義的測(cè)試環(huán)境，以便以后應(yīng)用程序不會(huì)遭受性能不佳的困擾。

延遲不必要的JavaScript加載

用戶喜歡快速加載的網(wǎng)頁或應(yīng)用程序，但在初始加載過程中無法訪問所有功能。對(duì)？

如果某些功能需要用戶執(zhí)行操作（例如，單擊圖像，切換選項(xiàng)卡等），則可以將這些功能的加載推遲到以后。

一旦頁面的初始加載完成，就可以加載延遲的功能。根據(jù)RAIL模型，Google建議以50毫秒的間隔完成此延遲的加載，以使用戶與頁面的互動(dòng)保持不受影響。

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

JavaScript總是在本地搜索變量，然后將其范圍逐步擴(kuò)展到全局變量。將變量保存在本地范圍內(nèi)有助于JavaScript更快地訪問它們。

請(qǐng)記住，您需要指定作用域并通過在每個(gè)變量之前添加let或const來定義當(dāng)前作用域，從而定義函數(shù)作用域。這將防止查找并加速代碼。

使用網(wǎng)絡(luò)工作者執(zhí)行耗時(shí)的代碼

我們?cè)诰幊躺闹杏龅搅撕芏啻a，這些代碼需要很多時(shí)間才能執(zhí)行，不是嗎？使用主線程（應(yīng)用程序的UI）運(yùn)行此類腳本會(huì)大大降低應(yīng)用程序的速度。

Web Workers可以在后臺(tái)線程中運(yùn)行腳本操作，并在單獨(dú)的線程中執(zhí)行關(guān)鍵進(jìn)程，從而確保主應(yīng)用程序不會(huì)在進(jìn)程中被阻塞或減慢速度。

將重復(fù)的DOM項(xiàng)目保存在本地變量上

DOM代表文檔對(duì)象模型（DOM）。它是一個(gè)應(yīng)用程序編程接口（API），用于定義文檔的邏輯結(jié)構(gòu)以及文檔的訪問和操作方式。

訪問DOM會(huì)花費(fèi)大量時(shí)間。如果您知道某個(gè)元素需要多次讀取，請(qǐng)將其保存在局部變量中。

但請(qǐng)記?。喝绻院笠?jiǎng)h除DOM的值，則應(yīng)將變量的值設(shè)置為“ null”，以免引起任何內(nèi)存泄漏。

利用工具檢測(cè)問題

Lighthouse是分析網(wǎng)頁性能的最佳工具之一。它可以幫助您審核性能，可訪問性，最佳實(shí)踐和SEO。

Google PageSpeed可以了解網(wǎng)站的性能優(yōu)化和潛在的改進(jìn)領(lǐng)域。這些組件可以識(shí)別出網(wǎng)站是否違反Google的Web Performance Best Practices，并自動(dòng)進(jìn)行調(diào)整。

Chrome中的“更多工具”選項(xiàng)可以顯示每個(gè)選項(xiàng)卡使用的內(nèi)存和CPU。此外，F(xiàn)irefox或Chrome中的“性能”視圖可用于分析高級(jí)指標(biāo)。