nginx優化:使用expires在瀏覽器端緩存靜態文件

一，nginx中expires指令的作用

網站的圖片等靜態文件一旦發布，通常很少改動，

為了減小對服務器請求的壓力，提高用戶瀏覽速度，

我們可以設置nginx中的expires，

使用戶訪問一次后，將圖片緩存在用戶的瀏覽器中

 

說明；如果用戶對瀏覽器強制刷新或着清除緩存，

          則expires的設置會失效，因為瀏覽器本地的緩存文件都沒了

 

說明：劉宏締的架構森林是一個專注架構的博客，地址：https://www.cnblogs.com/architectforest

         對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/

說明：作者:劉宏締 郵箱: [e-mail]

 

二，expires指令的語法:

語法： expires [time|epoch|max|off] 默認值： expires off 作用域： http, server, location

使用本指令可以控制HTTP應答中的“Expires”和“Cache-Control”的頭標

起到控制頁面緩存的作用

Expires頭標的值將通過當前系統時間加上設定time值來設定

1，負數表示no-cache

    例： -1：指定“Expires”的值為當前服務器時間-1s，即永遠過期

 

2，max:指定“Expires”的值為31 December2037 23:55:55GMT,"Cache-Control"的值為10年

    例子：

Cache-Control: max-age=315360000
Expires:Thu, 31 Dec 2037 23:55:55 GMT

 

3，epoch：指定“Expires”的值為 1 January,1970,00:00:01 GMT

例子：

Cache-Control:no-cache
Expires:Thu, 01 Jan 1970 00:00:01 GMT

可以看到緩存不起作用

 

4，正數或零表示max-age=time

 

5，off：關閉，不修改響應頭“Expires”和"Cache-Control"的值

 

三，expires的使用例子

1,對於圖片，通常過期時間可以設置為一個月

     location ~ \.(gif|jpg|jpeg|png|bmp|ico)$ {
           expires 30d;
       }

 

2,對js/css,通常過期時間設置為1周

    location ~* \.(js|css)$ {
            expires 7d;
    }

 

四，查看expires緩存效果

返回給瀏覽器的緩存信息:

Cache-Control: max-age:是緩存的總時間長度

Expires:是緩存到期的時間 

看截圖:

Cache-Control:max-age=2592000

這個cache的時間長2592000秒就是30天:

60x60x24x30 = 2592000

Expires:Wed, 27 May 2020 09:14:43 GMT

我們在4月27日打開的圖片文件，會在5月27日過期

 

五，在緩存過期之前，js文件或圖片文件有修改怎么辦？

1,

緩存過期之前，js文件和圖片會保存在用戶的瀏覽器端，

如果這時我們修改了js/css代碼或圖片，

此時用戶看到的仍然是有問題或未修改過的圖片。

這時我們需要通知瀏覽器，讓它重新加載修改過的頁面元素。

2,

一個js設置重新加載的例子:

//是否需要刷新的開關設置
var is_refresh_img = true;
//生成隨機數
var refresh_version = Math.random();
...
//如果需要刷新，則給圖片的src添加一個隨機參數，使瀏覽器重新加載
            if (is_refresh_img == true) {
                 var objs = document.getElementsByClassName("magaimg");
                 for (var i = 0; i < objs.length; i++) {
                     var arr_src = objs[i].src.split("?");
                     objs[i].src=arr_src[0]+"?t="+refresh_version;
                 } 
            }

說明:

refresh_version 可以設置為固定值，不要每次訪問頁面時都重新生成

因為這樣導致緩存失效，導致頁面每次加載時都刷新圖片

會影響瀏覽器的訪問速度

 

六，查看ngnix版本 

[root@blog ~]# /usr/local/openresty/nginx/sbin/nginx -v
nginx version: openresty/1.15.8.2