在 Web 應(yīng)用程序中設(shè)計(jì)干凈、可靠的緩存的指南。當(dāng)我訪問一個(gè)交互非常緩慢的網(wǎng)站時(shí)，我會(huì)感到惱火。例如，當(dāng)我們單擊按鈕時(shí)，該頁面在幾秒鐘后沒有反饋。我相信每個(gè)人都應(yīng)該有同樣的感覺。作為開發(fā)人員，如果我們開發(fā)的頁面太慢，我們將面臨挑戰(zhàn)。
改善用戶體驗(yàn)的更好方法是緩存數(shù)據(jù)。如果我們不禁用http標(biāo)頭的操作，瀏覽器將緩存靜態(tài)文件。后端服務(wù)器將使用 Redis 來緩存數(shù)據(jù)，而不是直接從數(shù)據(jù)庫中進(jìn)行查詢。在 Web 應(yīng)用程序中，緩存無處不在。在 React 項(xiàng)目中，我們可以使用緩存組件，用于緩存函數(shù)，用于緩存數(shù)據(jù)，cache-control memo useCallback useMemo
緩存很有用。本文將介紹如何在 Web 應(yīng)用程序中設(shè)計(jì)緩存，并包含以下章節(jié)：
1.如何選擇存儲(chǔ)數(shù)據(jù)的位置
2.如何管理數(shù)據(jù)的生命周期
3.如何確保緩存可靠
如何選擇存儲(chǔ)數(shù)據(jù)的位置
在Web應(yīng)用程序中，存儲(chǔ)數(shù)據(jù)的方法有很多種，我們可以通過內(nèi)存，cookie，本地存儲(chǔ)/會(huì)話存儲(chǔ)，索引DB保存在本地瀏覽器中。我們還可以通過頻繁的http請(qǐng)求將數(shù)據(jù)發(fā)布到后端服務(wù)器。
如果網(wǎng)站不是純文本，通常會(huì)有以下兩種類型的數(shù)據(jù)：
系統(tǒng)數(shù)據(jù)始終從后端服務(wù)器獲取。在大多數(shù)情況下，我們需要轉(zhuǎn)換數(shù)據(jù)，然后將其呈現(xiàn)到頁面。如果轉(zhuǎn)換數(shù)據(jù)非常耗時(shí)，并且可能發(fā)生多次，我們可能會(huì)將結(jié)果緩存在內(nèi)存中。我們可以在 React 項(xiàng)目中使用，或者只使用一個(gè)全局變量來保存結(jié)果，如下面的代碼所示：useMemo
您甚至可以通過使用函數(shù)屬性來緩存數(shù)據(jù)：
用戶操作是指用戶與網(wǎng)站交互時(shí)的狀態(tài)，如搜索數(shù)據(jù)、頁面上的前進(jìn)/后退、編寫內(nèi)容等。用戶動(dòng)作產(chǎn)生的數(shù)據(jù)在不同場(chǎng)景下需要使用不同的存儲(chǔ)方式。
如果需要跨設(shè)備或?yàn)g覽器訪問數(shù)據(jù)，最好將其存儲(chǔ)在后端。例如，一篇Medium文章的草稿，它將在大約5秒后發(fā)送到后端服務(wù)器，而我們停止編輯。
自動(dòng)保存中等代碼
如果在重新打開頁面時(shí)需要恢復(fù)頁面狀態(tài)，則最好使用 localStorage 將其存儲(chǔ)在磁盤中。例如，當(dāng)頁面支持大量過濾操作時(shí)，我們可以緩存用戶的過濾項(xiàng)，當(dāng)頁面再次打開時(shí)，可以顯示上次瀏覽的數(shù)據(jù)。
如果我們想在其他頁面中共享一些數(shù)據(jù)，我們可以使用會(huì)話存儲(chǔ)來存儲(chǔ)它。例如，在下面的例子中，我們必須從應(yīng)用程序1頁面A中導(dǎo)航另一個(gè)應(yīng)用程序2，執(zhí)行一些操作，然后返回到應(yīng)用程序1頁面B。
如果后端服務(wù)需要感知用戶的狀態(tài)，建議使用 Cookie。例如用戶是否命中灰度函數(shù)或ab-test。
IndexedDB用于大量結(jié)構(gòu)化數(shù)據(jù)，大多數(shù)項(xiàng)目都不需要它，我還沒有使用它。
如何管理數(shù)據(jù)的生命周期
每次創(chuàng)建數(shù)據(jù)時(shí)，最好考慮如何清理數(shù)據(jù)。在 JavaScript 中，我們創(chuàng)建變量，當(dāng)不需要時(shí)，GC 會(huì)清理這些變量。當(dāng)我們使用內(nèi)存來緩存數(shù)據(jù)時(shí)，它將被清理。會(huì)話存儲(chǔ)類似于內(nèi)存，并在窗口關(guān)閉時(shí)清除。但是，如果我們使用cookie或本地存儲(chǔ)，則最好考慮何時(shí)清理。
Cookie 支持設(shè)置過期時(shí)間，因此我們只需要提供過期策略。
本地存儲(chǔ)需要手動(dòng)管理生命周期。我們可以實(shí)現(xiàn)一個(gè)方法來做到這一點(diǎn)：
我們可以和一個(gè)額外的密鑰來存儲(chǔ)時(shí)間戳。當(dāng)我們從localStorage獲取該值時(shí)，我們將判斷它是否已過期，如果過期，則將被清除。我們還可以使用該方法在掛載應(yīng)用程序時(shí)刪除所有過期的密鑰。${key}__expires__removeExpired
如果我們的草稿數(shù)據(jù)保存在后端服務(wù)器上，最好有一個(gè)版本來記錄數(shù)據(jù)
如何確保緩存可靠
最重要的是可以命中緩存，但它需要確保我們從緩存中獲取的日期是正確的。例如，當(dāng)我們使用對(duì)象作為本地存儲(chǔ)的鍵時(shí)，將會(huì)出現(xiàn)意外結(jié)果：
是否已從另一個(gè)頁面修改。例如，在激活選項(xiàng)卡時(shí)，“Medium 編輯器”頁面將檢查草稿是否是最新的，如果您在其他瀏覽器或頁面中進(jìn)行編輯，可能會(huì)給您一個(gè)提示：
原因是當(dāng)我們發(fā)布一個(gè)對(duì)象時(shí)，localStorage的鍵必須是一個(gè)字符串，它將通過使用對(duì)象的屬性轉(zhuǎn)換為字符串。toString
首先，我們需要確保鍵是字符串類型，如果它不是字符串類型，我們需要提示或提供自動(dòng)序列化util。
如果我們?cè)趶?fù)雜的應(yīng)用程序中使用 localStorage，則需要確保緩存鍵是唯一的。我通常使用以下結(jié)構(gòu)來命名鍵：
如果緩存數(shù)據(jù)將在項(xiàng)目或其他頁面中共享，則鍵可能類似于 。僅當(dāng)數(shù)據(jù)結(jié)構(gòu)頻繁更改時(shí)，版本字段才是可選的。project_feature
最后，如果我們想使用localStorage來存儲(chǔ)函數(shù)或?qū)ο?，我們需要先序列化它們，并在獲取它們時(shí)反序列化它們。通常的方法是使用 JSON.字符串化和 JSON.解析，但對(duì)于函數(shù)是無用的。
結(jié)論
緩存對(duì)于頁面性能非常重要。在本文中，我們將學(xué)習(xí)如何選擇內(nèi)存，Cookie，會(huì)話存儲(chǔ)/本地存儲(chǔ)或后端服務(wù)器。當(dāng)我們使用緩存時(shí)，如何處理生命周期并為數(shù)據(jù)提供唯一的密鑰。
京公網(wǎng)安備 11010802030320號(hào)