用node探究http緩存

来源:https://www.cnblogs.com/floor/archive/2018/10/28/9867194.html
-Advertisement-
Play Games

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


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

什麼是http緩存

  • RFC 7234 (https://tools.ietf.org/pdf/rfc7234.pdf)指出HTTP緩存是響應消息的本地存儲，並且是控制其中消息的存儲、檢索和刪除的子系統。

  • 通俗講: http協議規定了一些指令, 實現http協議的伺服器和瀏覽器根據這些指令決定要不要以及如何把響應存儲起來以備後續使用.

http緩存的意義

  1. 提高響應速度
  2. 減少帶寬占用, 省流量
  3. 減小伺服器壓力

不指定任何與緩存有關的指令

這種情況下瀏覽器不做緩存, 每次都會想伺服器請求. 但是比較奇怪的是在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_processes  8;
  
events {
    worker_connections  65535;
}
  
http {
    include       mime.types;
    default_type  application/octet-stream;
    charset utf-8;
 
    log_format  main  '$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';
    sendfile       on;
    tcp_nopush     on;
    tcp_nodelay    on;
    keepalive_timeout  65;
    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;           
  
    gzip  off;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types       text/plain application/x-javascript text/css application/xml text/javascript;
    gzip_vary on;
  
 
    include vhosts/*.conf;
    server {
        listen       80;
        server_name  localhost;
        location / {
            proxy_pass  http://127.0.0.1:1234;
            proxy_set_header   Host             $http_host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-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

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android 彩色Toast實現
    Android預設的Toast太醜了，我們來封裝一個花里胡哨的Toast吧，就叫ColoredToast。 Github：https://github.com/imcloudfloating/DesignApp 效果： Toast有一個setView方法，通過它我們可以設置自定義的佈局，這裡我只是加 ...
  • 「Android」 基於Binder通信的C/S架構體系認知
    C/S架構（Client/Server，即客戶機/伺服器模式）分為客戶機和伺服器兩層：第一層是在客戶機系統上結合了表示與業務邏輯，第二層是通過網路結合了資料庫伺服器。簡單的說就是第一層是用戶表示層，第二層是資料庫層。客戶端和伺服器直接相連，這兩個組成部分都承擔著重要的角色。 Android內核是基於 ...
  • 繼續封裝個 Volley 組件
    前面已經封裝了很多常用、基礎的組件了： "base module" ， 包括了： crash 處理 常用工具類 apk 升級處理 log 組件 logcat 採集 ftp 文件上傳 blur 高斯模糊 fresco 圖片處理 等等 那麼，今天繼續再來封裝一個網路組件，基於 "volley" 的二次封 ...
  • Kotlin入門(28)Application單例化
    Application是Android的又一大組件，在App運行過程中，有且僅有一個Application對象貫穿應用的整個生命周期，所以適合在Application中保存應用運行時的全局變數。而開展該工作的基礎，是必須獲得Application對象的唯一實例，也就是將Application單例化。 ...
  • CSS回顧（基礎知識，元素，選擇器，盒子，顏色）
    元素分類： 1.行級元素：內聯元素 inline 特征：內容決定元素所占位置，不可以通過CSS改變寬高 span strong em a del 2.塊級元素：block特征：獨占一行，可以通過CSS改變寬高 div p ul li ol form address 3.行級塊元素：inline-bl ...
  • 【HTML&CSS】搜狐頁面代碼編寫
    看完一整本書，結果寫不出什麼東西，按書上教程來，基本能把例子完成個七七八八，可是用padding還是margin完全整不清……，而且只要結構一複雜，元素就各種不受控制。 沒辦法 找來韓順平老師的視頻（沒錯，就是在網上不知道怎麼搞來的） 看完老師講完整個html&CSS部分2，終於把這個內容吃透了。 ...
  • Vue 源碼分析—— 目錄結構
    Vue.js 的源碼都是在src 目錄下，其目錄結構如下。 1.compiler 目錄包含Vue.js 所有編譯相關的代碼。它包括把所有模板解析成ast 語法樹， ast 語法樹優化等功能。 2.core 目錄 包含了Vue.js 的核心代碼，包括內置組件，全局API封裝，Vue 實例化，觀察者，虛 ...
  • 基於ko-easyui實現的PC前端模板功能完善
    上一篇博客我向大家介紹了基於ko-easyui實現的開發模板，博客地址：https://www.cnblogs.com/cqhaibin/p/9825465.html#4095185。但在還遺留三個問題。本篇幅文章就以解決這三問題展開。 一、代理 前後端分離的開發模式，一定會存在前端開發工程，與後端 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類