請求304：緩存優化的重要一步

一、什麼是請求304？

請求304，即HTTP協議狀態碼中的「Not Modified」，表示客戶端發送的請求資源未被修改過，伺服器返回該狀態碼，告訴客戶端可以直接使用緩存數據，不需要再次請求該資源。這樣可以有效減少網路傳輸數據量，加快網頁顯示速度，提高用戶體驗。

二、為什麼要使用請求304？

常規的HTTP請求會將所有資源都重新請求一遍，這樣無論資源是否被修改都會重新傳輸一遍數據。這種不必要的網路傳輸會帶來很多負荷，影響網頁的載入速度和用戶體驗。

而使用請求304，可以實現緩存命中，不用重新下載文件，只需獲取元數據，減輕了伺服器的負擔，提高了頁面載入速度，節省了帶寬資源，降低了成本。

三、如何使用請求304？

要使用請求304，需要在HTTP頭部添加一些特殊的信息來控制瀏覽器緩存。例如：指定資源緩存時間，設置Etag標記等。

// 服務端代碼示例
const fs = require('fs');
const http = require('http');
const path = require('path');
const md5 = require('md5');

http.createServer((req, res) => {
  const fileName = path.resolve(__dirname, './public/index.html');
  
  fs.readFile(fileName, (err, data) => {
    if (err) {
      res.writeHead(404, { 'Content-Type': 'text/plain' });
      res.end('文件不存在！');
    } else {
      const etag = md5(data);
      const lastModified = fs.statSync(fileName).mtime.toUTCString();
      const ifNoneMatch = req.headers['if-none-match'];
      const ifModifiedSince = req.headers['if-modified-since'];
      
      if (etag === ifNoneMatch || lastModified === ifModifiedSince) {
        res.writeHead(304, { 'Content-Type': 'text/plain' });
        res.end();
      } else {
        res.writeHead(200, { 
          'Content-Type': 'text/html', 
          'Cache-Control': 'max-age=30', // 緩存時間 30s 
          'Last-Modified': lastModified, // 最後修改時間 
          'Etag': etag, // Etag 標記 
        });
        res.end(data);
      }
    }
  });
}).listen(3000);

四、請求304的注意事項

請求304需要配合緩存機制使用，控制緩存時間和緩存的範圍。同時，需要注意以下兩點：

1、緩存文件不一定會被跨站腳本攻擊（XSS）利用，但是一定會減少緩存時間，在安全性和效率之間進行取捨。

2、Etag和Last-Modified必須同時存在，如果某個瀏覽器不支持Etag，該請求將會失效。

五、應用請求304的場景

請求304多用於一些靜態的資源文件，例如JavaScript、CSS、圖片等。減少文件請求的次數，同時啟用瀏覽器緩存，提高數據的交互效率。

此外，在數據量較大的情況下，請求304可以顯著降低網路傳輸量，減小數據壓力，提高用戶體驗。