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

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

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

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

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

我將告訴您9條提示，您可以使用這些提示注意到應用程序性能的多項改進。讓我們開始吧。

刪除未使用的JavaScript

它不僅減少了傳輸時間，還減少了瀏覽器分析和編譯代碼所花費的時間。在刪除未使用的JavaScript時，應考慮以下幾點：

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

2. 如果一個庫被錯誤地包括進來并且不是必需的，則也將其刪除。

在瀏覽器中緩存

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

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

避免內(nèi)存泄漏

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

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

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

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

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

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

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

延遲不必要的JavaScript加載

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

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

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

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

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

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

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

我們在編程生涯中遇到了很多代碼，這些代碼需要很多時間才能執(zhí)行，不是嗎？使用主線程（應用程序的UI）運行此類腳本會大大降低應用程序的速度。

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

將重復的DOM項目保存在本地變量上

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

訪問DOM會花費大量時間。如果您知道某個元素需要多次讀取，請將其保存在局部變量中。

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

利用工具檢測問題

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

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

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