說到網(wǎng)站性能，我們知道有數(shù)以百萬計(jì)的網(wǎng)站在搜索引擎進(jìn)行競爭。研究表明，用戶將放棄網(wǎng)站加載時(shí)間超過三秒，三秒鐘是很短的時(shí)間，雖然現(xiàn)在許多網(wǎng)站的加載時(shí)間不到一秒鐘，但是沒有一個(gè)放之四海而皆準(zhǔn)的解決方案，第一個(gè)請求可能是你的應(yīng)用程序成敗的關(guān)鍵。

現(xiàn)代前端應(yīng)用程序越來越大。難怪業(yè)界越來越關(guān)注優(yōu)化?？蚣転閼?yīng)用程序創(chuàng)建了不合理的構(gòu)建規(guī)模，這可能決定應(yīng)用程序的成敗。您打包和提供的每一點(diǎn)不必要的代碼都會(huì)增加客戶端需要加載和處理的代碼。經(jīng)驗(yàn)法則是越少越好。數(shù)據(jù)加載模式是應(yīng)用程序的重要組成部分，因?yàn)樗鼈儗Q定訪問者可以直接使用應(yīng)用程序的哪些部分。不要因?yàn)樗麄冞x擇在應(yīng)用程序的主頁上加載5MB的圖像并更好地理解這個(gè)問題，而使整個(gè)網(wǎng)站變慢。您需要了解資源加載瀑布。

資源加載瀑布是從網(wǎng)絡(luò)服務(wù)器下載到客戶端的文件的級(jí)聯(lián)，用于從頭到尾加載您的網(wǎng)站。它本質(zhì)上描述了從網(wǎng)絡(luò)上下載并加載頁面的每個(gè)文件的生命周期。該圖表顯示了請求和加載的每個(gè)文件的時(shí)間表。您可以查看哪些文件先加載，并跟蹤每個(gè)連續(xù)的請求，直到某個(gè)文件需要很長時(shí)間才能加載。您可以檢查它，看看是否可以優(yōu)化它。在頁面底部，您可以檢查您的客戶端消耗了多少kB的資源。注意客戶端需要下載多少數(shù)據(jù)是很重要的。第一次嘗試時(shí)，您可以將其用作以后優(yōu)化的基準(zhǔn)。

沒有人喜歡白色的空白屏幕，尤其是你的用戶。滯后資源加載瀑布需要一個(gè)基本的占位符，然后才能開始在客戶端構(gòu)建布局。通常，您會(huì)使用旋轉(zhuǎn)器或骨骼加載器。隨著數(shù)據(jù)一個(gè)接一個(gè)地加載，頁面將顯示一個(gè)加載器，直到所有組件都準(zhǔn)備好。雖然添加加載器作為占位符是一種改進(jìn)，但是讓它持續(xù)太久會(huì)導(dǎo)致“旋轉(zhuǎn)地獄”本質(zhì)上，你的應(yīng)用程序在加載時(shí)停滯不前，雖然它比一個(gè)空白的HTML頁面好，但它可能會(huì)變得令人討厭，訪問者會(huì)選擇退出你的網(wǎng)站。

當(dāng)您想要快速獲取已經(jīng)擁有的數(shù)據(jù)時(shí)，您需要進(jìn)行緩存—緩存存儲(chǔ)用戶最近檢索到的數(shù)據(jù)?？梢酝ㄟ^兩種方式實(shí)現(xiàn)緩存:使用Redis這樣的超快速鍵-值存儲(chǔ)來保存數(shù)據(jù)鍵和值，以及使用簡單的瀏覽器緩存來本地存儲(chǔ)數(shù)據(jù)。緩存部分存儲(chǔ)您的數(shù)據(jù)，而不是用作永久存儲(chǔ)。將緩存用作永久存儲(chǔ)是一種反模式。強(qiáng)烈建議生產(chǎn)應(yīng)用程序使用緩存；隨著新應(yīng)用的逐漸成熟，它們將開始使用緩存。但是什么時(shí)候應(yīng)該在Redis緩存(服務(wù)器緩存)和瀏覽器緩存(本地緩存)之間做出選擇呢？兩者都可以同時(shí)使用，但最終將服務(wù)于不同的目的。

服務(wù)器緩存有助于降低前端和后端之間的延遲；由于鍵值數(shù)據(jù)庫比傳統(tǒng)的關(guān)系SQL數(shù)據(jù)庫更快，這將顯著增加API的響應(yīng)時(shí)間。然而，本地緩存有助于改善應(yīng)用程序狀態(tài)管理，使應(yīng)用程序能夠在頁面刷新后保持狀態(tài)，并有助于未來的訪問。

總之，如果你想提高你的應(yīng)用程序的性能，你可以使用服務(wù)器緩存來加速你的API，但是如果你想保持你的應(yīng)用程序狀態(tài)，你應(yīng)該使用本地存儲(chǔ)緩存。雖然本地緩存可能看起來沒有任何幫助，但它確實(shí)有助于減少API調(diào)用的次數(shù)通過持久化不經(jīng)常改變的狀態(tài)。然而，當(dāng)與實(shí)時(shí)數(shù)據(jù)結(jié)合時(shí)，本地緩存會(huì)更好。