用node探究http快取

HTTP 代理伺服器 · 發表 2018-10-28 21:10:00

摘要：用node搞web服務和直接用tomcat、Apache做伺服器不太一樣，很多工作都需要自己做。快取策略也要自己選擇，雖然有像koa-static，express.static這些東西可以用來管理靜態資源，但是為了開發或配置時更加得心應手，知其所以然，有了解http快取的必要。另外，http...

用node搞web服務和直接用tomcat、Apache做伺服器不太一樣，很多工作都需要自己做。快取策略也要自己選擇，雖然有像koa-static，express.static這些東西可以用來管理靜態資源，但是為了開發或配置時更加得心應手，知其所以然，有了解http快取的必要。另外，http快取作為一個前端優化的一個要點，也應該有所瞭解。

什麼是http快取

RFC 7234 ( ofollow,noindex" target="_blank">https://tools.ietf.org/pdf/rfc7234.pdf )指出HTTP快取是響應訊息的本地儲存，並且是控制其中訊息的儲存、檢索和刪除的子系統。
通俗講: http協議規定了一些指令, 實現http協議的伺服器和瀏覽器根據這些指令決定要不要以及如何把響應儲存起來以備後續使用.

http快取的意義

提高響應速度
減少頻寬佔用, 省流量
減小伺服器壓力

不指定任何與快取有關的指令

這種情況下瀏覽器不做快取, 每次都會想伺服器請求. 但是比較奇怪的是在nginx的實現中, 這種情況下還是被代理伺服器做了快取.也就是說, 當多次請求同一個資源時, 代理伺服器只向源伺服器請求一次.

演示第1個例子nothing_1

強制快取

所謂強制快取就是給出資源的到期時間 expires 或者有效時間 max-age , 在這個時間之內該資源應該被快取.
如何讓一個資源被強快取

1.expires

這個欄位定義了一個資源到期的時間. 看一個實際的例子:

可以看到這個 expires 是個 GMT 時間, 它的工作機制是, 首次請求時, 伺服器在響應中加上 expires 標識資源的到期時間, 瀏覽器快取這個資源, 再次請求時, 瀏覽器將上一次請求到這個資源的過期時間與自己的系統時間對比, 若系統時間小於過期時間, 則證明資源沒有過期, 直接用上次快取的資源, 不必請求; 否則重新請求, 伺服器在響應中給出新的過期時間.

演示第9個例子expires_9

const d= new Date(Date.now() + 5000);
res.writeHead(200, {
'Content-Type': 'image/png',
'expires': d.toGMTString()
});
res.end(img);

2.Cache-Control:[public | private,] max-age= \({n}, s-maxage=\) {m}

expires 存在的問題是他依賴於客戶端的系統時間, 客戶端系統時間錯誤可能會引起判斷錯誤. HTTP1.1增加了 Cache-Control 解決此問題, 這個指令值比較豐富, 常見的如下:

public/private: 標識資源能不能被代理伺服器快取, public 標識資源既能被代理伺服器快取也能被瀏覽器快取, private 標識資源只能被瀏覽器快取, 不能被代理伺服器快取.
max-age: 用於指定在客戶端快取的有效時間, 單位s, 超過n秒需要重新請求, 不超過則可以使用快取
s-maxage: 這個是針對代理伺服器的, 表示資源在代理伺服器快取時間沒有超過這個時間不必向源伺服器請求, 否則需要.
no-cache: 有這個指令表示不走瀏覽器快取了, 協商快取還可以走
no-store: 強制無快取, 協商快取也不走了, 測試發下即使響應中有 Last-Modified , 瀏覽器請求時頁不會帶 If-Modified-Since

一個例項

演示第2,3,4,5,7

協商快取

所謂協商快取就是客戶端想用快取資源時先向伺服器詢問, 如果伺服器如果認為這個資源沒有過期, 可以繼續用則給出304響應, 客戶端繼續使用原來的資源; 否則給出200, 並在響應body加上資源, 客戶端使新的資源.

1.Last-Modified與If-Modified-Since

這個機制是, 伺服器在響應頭中加上 Last-Modified , 一般是一個資源的最後修改時間, 瀏覽器首次請求時獲得這個時間, 下一次請求時將這個時間放在請求頭的 If-Modified-Since , 伺服器收到這個 If-Modified-Since 時間 n 後查詢資源的最後修改時間 m 與之對比, 若 m>n , 給出200響應, 更新 Last-Modified 為新的值, body中為這個資源, 瀏覽器收到後使用新的資源; 否則給出304響應, body無資料, 瀏覽器使用上一次快取的資源.

2.Etag與If-None-Match

Last-Modified 模式存兩個問題, 一是它是秒級別的比對, 所以當資源的變化小於一秒時瀏覽器可能使用錯誤的資源; 二是資源的最新修改時間變了可能內容並沒有變, 但是還是會給出完整響應, 造成浪費. 基於此在HTTP1.1引入了Etag模式.

這個與上面的 Last-Modified 機制基本相同, 不過不再是比對最後修改時間而是比對資源的標識, 這個Etag一般是基於資源內容生成的標識. 由於Etag是基於內容生成的, 所以當且僅當內容變化才會給出完整響應, 無浪費和錯誤的問題.

演示第8, 10

如何選擇快取策略

https://developers.google.cn/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn

附錄

1.演示程式碼

const http = require('http');
const fs = require('fs');
let etag = 0;
let tpl = fs.readFileSync('./index.html');
let img = fs.readFileSync('./test.png');
http.createServer((req, res) => {
etag++; // 我是個假的eTag
console.log('--->', req.url);
switch (req.url) {
// 模板
case '/index':
res.writeHead(200, {
'Content-Type': 'text/html',
'Cache-Control': 'no-store'
});
res.end(tpl);
break;
// 1. 不給任何與快取相關的頭, 任何情況下, 既不會被瀏覽器快取, 也不會被代理服務快取
case '/img/nothing_1':
res.writeHead(200, {
'Content-Type': 'image/png'
});
res.end(img);
break;

// 2. 設定了no-cache表明每次要使用快取資源前需要向伺服器確認
case '/img/cache-control=no-cache_2':
res.writeHead(200, {
'Content-Type': 'image/png',
'cache-control': 'no-cache'
});
res.end(img);
break;

// 3. 設定max-age表示在瀏覽器最多快取的時間
case '/img/cache-control=max-age_3':
res.writeHead(200, {
'Content-Type': 'image/png',
'cache-control': 'max-age=10'
});
res.end(img);
break;

// 4. 設定了max-age s-maxage public: public 是說這個資源可以被伺服器快取, 也可以被瀏覽器快取, 
// max-age意思是瀏覽器的最長快取時間為n秒, s-maxage表明代理伺服器的最長快取時間為那麼多秒
case '/img/cache-control=max-age_s-maxage_public_4':
res.writeHead(200, {
'Content-Type': 'image/png',
'cache-control': 'public, max-age=10, s-maxage=40'
});
res.end(img);
break;

// 設定了max-age s-maxage private: private 是說這個資源只能被瀏覽器快取, 不能被代理伺服器快取
// max-age說明了在瀏覽器最長快取時間, 這裡的s-maxage實際是無效的, 因為不能被代理服務快取
case '/img/cache-control=max-age_s-maxage_private_5':
res.writeHead(200, {
'Content-Type': 'image/png',
'cache-control': 'private, max-age=10, s-maxage=40'
});
res.end(img);
break;

// 7. 可以被代理伺服器快取, 確不能被瀏覽器快取
case '/img/cache-control=private_max-age_7':
res.writeHead(200, {
'Content-Type': 'image/png',
'cache-control': 'public, s-maxage=40'
});
res.end(img);
break;
// 8. 協商快取
case '/img/talk_8':
let stats = fs.statSync('./test.png');
let mtimeMs = stats.mtimeMs;
let If_Modified_Since = req.headers['if-modified-since'];
let oldTime = 0;
if(If_Modified_Since) {
const If_Modified_Since_Date = new Date(If_Modified_Since);
oldTime = If_Modified_Since_Date.getTime();
}

mtimeMs = Math.floor(mtimeMs / 1000) * 1000;// 這種方式的精度是秒, 所以毫秒的部分忽略掉
console.log('mtimeMs', mtimeMs);
console.log('oldTime', oldTime);
if(oldTime < mtimeMs) {
res.writeHead(200, {
'Cache-Control': 'no-cache',
// 測試發現, 必須要有max-age=0 或者no-cache,或者expires為當前, 才會協商, 否則沒有協商的過程 
'Last-Modified': new Date(mtimeMs).toGMTString()
});
res.end(fs.readFileSync('./test.png'));
}else {
res.writeHead(304);
res.end();
}

// 9. 設定了expires, 表示資源到期時間
case '/img/expires_9':
const d= new Date(Date.now() + 5000);
res.writeHead(200, {
'Content-Type': 'image/png',
'expires': d.toGMTString()
});
res.end(img);
break;

// 10. 設定了expires, 表示資源到期時間
case '/img/etag_10':
const If_None_Match = req.headers['if-none-match'];
console.log('If_None_Match,',If_None_Match);
if(If_None_Match != etag) {
res.writeHead(200, {
'Content-Type': 'image/png',
'Etag': String(etag)
});
res.end(img);
}else {
res.statusCode = 304;
res.end();
}

break;

// 11. no-store 能協商快取嗎? 不能, 請求不會帶if-modified-since
case '/img/no-store_11':
const stats2 = fs.statSync('./test.png');
let mtimeMs2 = stats2.mtimeMs;
let If_Modified_Since2 = req.headers['if-modified-since'];
let oldTime2 = 0;
if(If_Modified_Since2) {
const If_Modified_Since_Date = new Date(If_Modified_Since2);
oldTime2 = If_Modified_Since_Date.getTime();
}

mtimeMs2 = Math.floor(mtimeMs2 / 1000) * 1000;// 這種方式的精度是秒, 所以毫秒的部分忽略掉
console.log('mtimeMs', mtimeMs2);
console.log('oldTime', oldTime2);
if(oldTime2 < mtimeMs2) {
res.writeHead(200, {
'Cache-Control': 'no-store',
// 測試發現, 必須要有max-age=0 或者no-cache,或者expires為當前, 才會協商, 否則沒有協商的過程 
'Last-Modified': new Date(mtimeMs2).toGMTString()
});
res.end(fs.readFileSync('./test.png'));
}else {
res.writeHead(304);
res.end();
}
default:
res.statusCode = 404;
res.statusMessage = 'Not found',
res.end();
}

}).listen(1234);

2.測試用代理伺服器nginx配置

不要問我這是個啥, 我是copy的

worker_processes8;

events {
worker_connections65535;
}

http {
includemime.types;
default_typeapplication/octet-stream;
charset utf-8;
 
log_formatmain'$http_x_forwarded_for $remote_addr $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_cookie" $host $request_time';
sendfileon;
tcp_nopushon;
tcp_nodelayon;
keepalive_timeout65;
proxy_connect_timeout 500;
#跟後端伺服器連線的超時時間_發起握手等候響應超時時間
proxy_read_timeout 600;
#連線成功後_等候後端伺服器響應的時間_其實已經進入後端的排隊之中等候處理
proxy_send_timeout 500;
#後端伺服器資料回傳時間_就是在規定時間內後端伺服器必須傳完所有資料
proxy_buffer_size 128k;
#代理請求快取區_這個快取區間會儲存使用者的頭資訊以供Nginx進行規則處理_一般只要能儲存下頭資訊即可
proxy_buffers 4 128k;
#同上 告訴Nginx儲存單個用的幾個Buffer最大用多大空間
proxy_busy_buffers_size 256k;
#如果系統很忙的時候可以申請更大的proxy_buffers 官方推薦*2
proxy_temp_file_write_size 128k;
#設定web快取區名為cache_one,記憶體快取空間大小為12000M，自動清除超過15天沒有被訪問過的快取資料，硬碟快取空間大小200g
#要想開啟nginx的快取功能，需要新增此處的兩行內容！
#設定Web快取區名稱為cache_one,記憶體快取空間大小為500M,快取的資料超過1天沒有被訪問就自動清除;訪問的快取資料,硬碟快取空間大小為30G
proxy_cache_path /usr/local/nginx/proxy_cache_path levels=1:2 keys_zone=cache_one:500m inactive=1d max_size=30g;
 
#建立快取的時候可能生成一些臨時檔案存放的位置
proxy_temp_path /usr/local/nginx/proxy_temp_path;
 
fastcgi_connect_timeout 3000;
fastcgi_send_timeout 3000;
fastcgi_read_timeout 3000;
fastcgi_buffer_size 256k;
fastcgi_buffers 8 256k;
fastcgi_busy_buffers_size 256k;
fastcgi_temp_file_write_size 256k;
fastcgi_intercept_errors on;


client_header_timeout 600s;
client_body_timeout 600s;

client_max_body_size 100m;
client_body_buffer_size 256k;

gzipoff;
gzip_min_length1k;
gzip_buffers4 16k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_typestext/plain application/x-javascript text/css application/xml text/javascript;
gzip_vary on;

 
include vhosts/*.conf;
server {
listen80;
server_namelocalhost;
location / {
proxy_passhttp://127.0.0.1:1234;
proxy_set_headerHost$http_host;
proxy_set_headerX-Real-IP$remote_addr;
proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;
proxy_redirect off;
proxy_cache cache_one;
#此處的cache_one必須於上一步配置的快取區域名稱相同
proxy_cache_valid 200 304 12h;
proxy_cache_valid 301 302 1d;
proxy_cache_valid any 1h;
#不同的請求設定不同的快取時效
proxy_cache_key $uri$is_args$args;
#生產快取檔案的key，通過4個string變數結合生成
expires off;
#加了這個的話會自己修改cache-control, 寫成off則不會
proxy_set_header X-Forwarded-Proto $scheme;
}
}
}

參考文獻

https://juejin.im/book/5b936540f265da0a9624b04b/section/5b9ba651f265da0ac726e5de

這是一個付費的冊子，可能沒法訪問