如果您的 Web 應用程序中包含搜索框、分頁功能，或者需要多次通過 API 調用加載相同內容，那么這篇文章將為您提供有價值的優化思路。
我們將使用 JavaScript 的 Fetch API 從服務器檢索數據，并在輸入框中鍵入內容時實時獲取相關結果，最終將結果顯示在頁面上。以下是正常代碼流的基本框圖：
接下來，我們將學習如何通過實現緩存機制來優化這一流程：
為了更好地理解緩存機制的工作原理，我們可以參考以下流程圖：
以下是實現該功能的代碼示例：
// 用于存儲緩存數據
var cache = [];
// 輸入事件處理函數
function on_type(r = 0, val = null) {
// 在 API 調用之前
if (!r) {
ajax(fetch.php?search=${val}, on_type);
}
// 在 API 調用之后
else {
// 使用結果填充 DOM
let codes = r.results.map(e => <li>${e}</li>).join('');
document.getElementById('results').innerHTML = codes;
}
}// 實現緩存的自定義 AJAX 函數
function ajax(url, callback) {
// 為每個唯一的 API 調用生成唯一字符串
let hash = md5(url);
// 檢查緩存中是否存在數據
let item = cache.find(e => e.hash === hash);
// 如果找到緩存數據，則返回緩存數據
if (item) return callback(item.r);
// 如果未命中緩存，則發起網絡請求
fetch(url)
.then(response => response.json())
.then(response => {
// 將數據存儲到緩存中
save_in_cache(hash, response);
callback(response);
});
}// 緩存數據存儲函數
function save_in_cache(hash, response) {
// 將數據存儲到緩存中
cache.push({ hash, r: response });
// 限制緩存大小為 50 條記錄，避免內存占用過高
if (cache.length > 50) cache.splice(0, cache.length - 50);
}通過上述代碼實現的緩存機制，我們可以顯著減少網絡請求次數。以下 GIF 動圖展示了優化后的效果：在 90 次網絡調用中，有 69 次是緩存命中，僅 24% 的請求是實際的網絡調用，其余 76% 的數據均來自緩存。
通過本文的介紹，我們學習了如何在網絡調用中實現緩存機制，從而減少網絡請求次數并降低服務器負載。除此之外，您還可以利用 sessionStorage 將緩存提升到更高的層次，以實現更持久的存儲。
希望本文能為您提供一些啟發，幫助您優化 Web 應用程序的性能！
原文鏈接: https://xbytelab.com/blog/Implement-caching-in-js-fetch-API/1293046