Nginx在瀏覽器上的緩存行為

1、Nginx默認(rèn)配置下的緩存行為

以下演示用的 Nginx 版本都是 1.12.2，默認(rèn)的demo項(xiàng)目目錄如下：

index.html 和 test.html 文件內(nèi)容基本一樣，只是為了測試瀏覽器會(huì)不會(huì)對(duì)文件名采取不同緩存行為。

文件內(nèi)容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index.html緩存測試</title>

    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./wentest.css">
</head>
<body>
    <h1>index.html緩存測試</h1>

    <img src="./imgtest.png" alt="">
    <img src="./index.jpg" alt="">
    <img src="./test02.jpg" alt="">

    <script src="./index.js"></script>
    <script src="./wentest.js"></script>

</body>
</html>

以默認(rèn)的 Nginx 配置為準(zhǔn)，具體如下。（下面的 Nginx 配置跟默認(rèn)配置基本保持一致，只是修改了訪問時(shí)指向的資源路徑，未做任何緩存配置。）

#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
 
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    server {
        listen       80;
        server_name  localhost;
        location =/ {
            root /usr/local/nginx/html/mytest;
            index index.html;
        }

        location ~* \.(html|gif|jpg|jpeg|css|js|png|ico|eot|ttf|woff|svg)$ {
            root /usr/local/nginx/html/mytest;
        }
    }
}

分別訪問 index.html 和 test.html，可以發(fā)現(xiàn)，兩者的緩存行為是一樣的，可以證明，瀏覽器的緩存行為跟文件名無關(guān)。

1.1、Chrome瀏覽器緩存表現(xiàn)

以下用的Chrome瀏覽器版本都是127.0.6533.100（正式版本）（64 位）

1.1.1、首次訪問

第一次訪問結(jié)果如下，可以看到第一次訪問狀態(tài)碼都是 200，且都是沒有緩存記錄的，

通過查看 Nginx 日志可以看到訪問記錄，如下：

html 文件和其他文件的請(qǐng)求頭和響應(yīng)頭分別如下：

html 文件：

JS、CSS 和圖片文件：

可以看出，首次訪問時(shí)都不會(huì)命中緩存，而且 Chrome 瀏覽器默認(rèn)都會(huì)往請(qǐng)求頭中添加 Cache-Control: no-cache，即告訴服務(wù)器瀏覽器需要通過協(xié)商緩存來判定是否使用瀏覽器緩存。而服務(wù)器默認(rèn)會(huì)返回 ETag 和 Last-modified 響應(yīng)頭信息，以此告訴瀏覽器關(guān)于緩存的信息。

1.1.2、再次訪問

在進(jìn)行首次訪問后，多次刷新瀏覽器（F5鍵）或間隔長時(shí)間再刷新瀏覽器，可以看到，此時(shí)瀏覽器對(duì)資源進(jìn)行了緩存，并且瀏覽器對(duì) html 文件的緩存行為和其他資源的不一樣。

查看 Nginx 日志可以看到Nginx 只接收到了 html 的請(qǐng)求，瀏覽器對(duì)于其他資源是直接取的瀏覽器緩存，并沒有往服務(wù)器發(fā)起請(qǐng)求。如下，狀態(tài)是 304，文件大小 0

html 文件和其他文件的請(qǐng)求頭和響應(yīng)頭分別如下：

html 文件：

JS、CSS 和圖片文件：

1.1.3、結(jié)論

Nginx 默認(rèn)配置，在 Chrome 瀏覽器中：

首次訪問，永遠(yuǎn)不會(huì)使用緩存（因?yàn)闉g覽器此時(shí)還沒有緩存該資源），但是瀏覽器會(huì)在請(qǐng)求頭中會(huì)帶上強(qiáng)制緩存標(biāo)識(shí) Cache-Control: no-cache（這實(shí)際上也是告訴服務(wù)器使用協(xié)商緩存），而 Nginx 服務(wù)器也會(huì)在資源的響應(yīng)頭加上協(xié)商緩存的標(biāo)識(shí)（包括ETag 和 Last-Modified ）。
再次訪問時(shí)或間隔較長時(shí)間再訪問，此時(shí)全部都會(huì)使用緩存，不同的是，html 文件會(huì)使用協(xié)商緩存，而其他資源都使用強(qiáng)緩存。

所以說，Nginx 默認(rèn)配置下，在 Chrome 瀏覽器中，首次訪問，資源不會(huì)使用緩存；再次訪問，html 文件會(huì)使用協(xié)商緩存，而其他資源都使用強(qiáng)緩存；

1.2、Firefox 瀏覽器緩存表現(xiàn)

Firefox 瀏覽器（124.0.2 (64 位)）緩存行為其實(shí)跟 Chrome 瀏覽器一樣。首次訪問時(shí)不會(huì)命中緩存，短時(shí)間內(nèi)再次訪問時(shí) html 文件會(huì)通過協(xié)商緩存判斷是否取瀏覽器緩存，而其他資源也是直接取瀏覽器緩存。

首次訪問

再次訪問

1.3、更新服務(wù)器資源時(shí)的緩存表現(xiàn)（模擬生產(chǎn)部署）

我們更新服務(wù)器上的 index.html、index.js、index.css、index.jpg 文件，模擬生產(chǎn)上的部署，更新完后不重啟 Nginx（實(shí)際上重啟 Nginx 并不會(huì)影響緩存效果），刷新瀏覽器，第一次請(qǐng)求如下：

index.html 響應(yīng)信息

index.js 響應(yīng)信息

可以看到，index.html 能正常請(qǐng)求到最新資源，并且last-modified 已經(jīng)發(fā)生了改變；但是 index.js、index.css 等資源并無法請(qǐng)求最新資源，還是命中緩存且 last-modified 沒變。

再次請(qǐng)求如下：

可以看到又回到初始狀態(tài)，html 文件命中協(xié)商緩存，其他資源使用強(qiáng)制緩存。

2、Nginx生產(chǎn)配置下的緩存行為

生存上關(guān)于 Nginx 的緩存的配置一般也不會(huì)太負(fù)載，一般只是會(huì)配置下靜態(tài)資源緩存短暫時(shí)間。如下基本還原了真實(shí)的 Nginx 生產(chǎn)配置：

#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
 
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    server {
        listen       80;
        server_name  localhost;
        location =/ {
            root /usr/local/nginx/html/mytest;
            index index.html;
        }

        location ~* \.(html|gif|jpg|jpeg|css|js|png|ico|eot|ttf|woff|svg)$ {
            root /usr/local/nginx/html/mytest;
            expires 1m;
        }
    }
}

如上，真實(shí)的生產(chǎn)配置往往只會(huì)往靜態(tài)資源添加短暫時(shí)間的強(qiáng)制緩存（如上例1分鐘）。更新 Nginx 配置，重啟 Nginx，訪問瀏覽器可以發(fā)現(xiàn)：

首次訪問時(shí)，瀏覽器如果沒有緩存則不會(huì)命中緩存，資源響應(yīng)全都是 200 響應(yīng)碼
一分鐘內(nèi)多次訪問時(shí)，html 文件仍然是 304 即會(huì)使用協(xié)商緩存，但其他資源會(huì)依照 Nginx 命中強(qiáng)制緩存
相隔一分鐘之后再次訪問，html 文件仍然是 304 使用協(xié)商緩存，其他資源也變成 304 響應(yīng)碼，即會(huì)依照 Nginx 配置命中協(xié)商緩存

可以證明，在 Nginx 中配置了靜態(tài)資源的強(qiáng)制緩存后，除 html 文件外其他資源在配置的時(shí)間內(nèi)是能命中強(qiáng)制緩存的，超過配置時(shí)間后會(huì)通過協(xié)商緩存來獲取資源。但是強(qiáng)制緩存對(duì) html 文件是沒用的（至少驗(yàn)證了在 Chrome、Firefox 瀏覽器中是這樣的），即不管是否配置了強(qiáng)制緩存，瀏覽器都會(huì)對(duì) html 文件使用協(xié)商緩存。瀏覽器的這一行為往往也符合真實(shí)的場景和真實(shí)的需要。

3、最佳實(shí)踐

最佳實(shí)踐配置示例如下：

#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
 
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    server {
        listen       80;
        server_name  localhost;
        location =/ {
            root /usr/local/nginx/html/mytest;
            index index.html;
        }

        location ~* \.(html|gif|jpg|jpeg|css|js|png|ico|eot|ttf|woff|svg)$ {
            root /usr/local/nginx/html/mytest;
            expires 1m;
        } 
    }
}

說明：

最佳配置說明：給所有除 html 外的靜態(tài)資源配置短時(shí)間的強(qiáng)制緩存，如1分鐘。（或者也包含 html 文件，因?yàn)樯厦娴膶?shí)踐表明，即使給 html 配置了強(qiáng)制緩存，瀏覽器針對(duì) html 文件使用的永遠(yuǎn)都是協(xié)商緩存）
原因說明：首次訪問后，在1分鐘內(nèi)瀏覽器都會(huì)命中強(qiáng)制緩存（html除外），不會(huì)往 Nginx 發(fā)送請(qǐng)求，這可以提高頁面訪問速度。在1分鐘之后，強(qiáng)制緩存失效，瀏覽器發(fā)出請(qǐng)求，由服務(wù)器決定是否使用緩存。所以如果服務(wù)器資源有更新的話那么瀏覽器也能在1分鐘之后獲取到最新的資源。

實(shí)際現(xiàn)在很多前端項(xiàng)目都會(huì)需要 build 編譯，編譯過后 js、css、圖片等資源名稱會(huì)加上時(shí)間戳后綴（一般編譯后 html 文件名不會(huì)加后綴），即名稱已改變，而 html 文件一直都是協(xié)商緩存，所以一旦重新部署更新了 html 文件，瀏覽器可以立即獲取到最新的 html 文件，而最新的 html 文件里引入的其他資源名稱已經(jīng)發(fā)生了改變，所以也可以獲取到最新的其他資源文件。這種情況下也可以保證用戶能一直獲取到最新資源，即使不配置任何緩存配置。

posted @ 2021-08-08 19:00 wenxuehai 閱讀(772) 評(píng)論(0) 收藏舉報(bào)

刷新頁面返回頂部

提升自己，才有選擇的能力和勇氣