JS快取機制的五個關鍵要點總結

知識大盤點：JS快取機制中的五個關鍵要點，需要具體程式碼範例

導語：在前端開發中，快取是提高網頁效能的重要一環。 JavaScript快取機制是指將已經取得的資源保存在本地，以便在後續的存取中能夠直接使用快取，從而減少資源載入時間和網路頻寬的消耗。本文將介紹JS快取機制中的關鍵要點，並提供具體的程式碼範例。

一、快取類型

1. 強快取

強快取是指透過設定HTTP回應頭中的Expires或Cache-Control欄位來實現的緩存機制。當瀏覽器請求資源時，會先檢查該資源在本機是否存在緩存，如果存在且仍在有效期內，則直接使用緩存，不再發送請求。

範例程式碼：

// 设置缓存时间为1个小时
res.setHeader('Cache-Control', 'max-age=3600');

2. 協商快取

#協商快取是透過設定HTTP請求頭中的If-Modified-Since或If-None- Match字段來與伺服器通訊的快取機制。當瀏覽器請求一個資源時，會先發送請求到伺服器，伺服器根據請求頭中的欄位和資源的最後修改時間進行比較，如果資源未發生變化，則傳回狀態碼304 Not Modified，並通知瀏覽器使用本機快取。

範例程式碼：

// 获取请求头中的If-Modified-Since字段
const ifModifiedSince = req.headers['if-modified-since'];

// 获取资源的最后修改时间
const lastModified = fs.statSync(filepath).mtime.toUTCString();

// 比较请求头中的字段与最后修改时间
if (ifModifiedSince === lastModified) {
  res.statusCode = 304; // Not Modified
  res.end();
} else {
  res.setHeader('Last-Modified', lastModified);
  // 返回资源
  res.end(file);
}

二、快取位置

1. 瀏覽器快取

瀏覽器快取是指快取在瀏覽器本地的快取檔案。當瀏覽器存取相同資源時，會先檢查該資源是否存在快取文件，如果存在則直接使用緩存，否則發送網路請求。

範例程式碼：

// 读取缓存
const cache = localStorage.getItem('cache');

// 判断缓存是否存在
if (cache) {
  // 使用缓存
} else {
  // 发送网络请求
}

2. 伺服器快取

#伺服器快取是指快取在伺服器端的快取檔案。當瀏覽器請求資源時，伺服器會檢查該資源是否存在快取文件，如果存在則直接傳回快取文件。

範例程式碼：

// 判断文件是否存在
if (fs.existsSync(filepath)) {
  // 返回缓存文件
} else {
  // 发送网络请求
}

三、快取時間控制

1. 快取時間

快取時間是指強快取或協商緩存的有效期限時間，可依需求設定不同的快取時間。

範例程式碼：

// 设置缓存时间为1个小时
res.setHeader('Cache-Control', 'max-age=3600');

2. 快取策略

#快取策略是指根據資源類型或資源路徑設定不同的快取策略。可以使用正規表示式或字串匹配來實現不同的快取策略。

範例程式碼：

// 设置图片资源的缓存时间为1个月
if (req.url.match(/.jpg|.png|.gif$/)) {
  res.setHeader('Cache-Control', 'max-age=2592000');
}

四、快取更新

1. 版本控制

版本控制是指在請求資源時新增版本號，當資源改變時更新版本號。透過更新版本號可以強制瀏覽器重新載入資源。

範例程式碼：

<!-- 添加版本号 -->
<link rel="stylesheet" href="styles.css?v=1.0">
<script src="script.js?v=1.0"></script>

2. 強制刷新

#強制刷新是指透過設定Cache-Control欄位的max-age為0來告訴瀏覽器立即更新快取。

範例程式碼：

// 强制刷新缓存
res.setHeader('Cache-Control', 'max-age=0');

五、快取清除

快取清除是指手動刪除瀏覽器本機的快取檔案或伺服器端的快取檔案。

範例程式碼：

// 清除浏览器缓存
localStorage.removeItem('cache');

// 清除服务器缓存
fs.unlinkSync(filepath);

總結：對於前端開發中常見的JS快取機制，我們介紹了五個關鍵要點，涉及的內容包括快取類型、快取位置、快取時間控制、快取更新和快取清除。掌握這些關鍵要點能夠幫助我們更能理解並應用快取機制，提升網頁效能，提升使用者體驗。希望透過本文的介紹，能對各位讀者有所幫助。

以上是JS快取機制的五個關鍵要點總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！