摘要：在我們開發(fā)網(wǎng)站的時候往往對網(wǎng)站的性能有極高的需求當然外包的除外哈我見過的外包對效率要求特別高對代碼質(zhì)量以及性能要求都不是很高所以這里就不說明太多高性能就意味著要使用各式各樣的緩存后臺緩存等前臺就是瀏覽器緩存什么是瀏覽器緩存簡單來說就是瀏覽器

在我們開發(fā)網(wǎng)站的時候往往對網(wǎng)站的性能有極高的需求,當然,外包的除外哈.我見過的外包對效率要求特別高.對代碼質(zhì)量以及性能要求都不是很高.所以這里就不說明太多.高性能就意味著要使用各式各樣的緩存,后臺redis/memcached緩存等,前臺就是瀏覽器緩存.什么是瀏覽器緩存.簡單來說,就是瀏覽器繼續(xù)使用從服務器上的內(nèi)容,而不去使用服務器上的內(nèi)容.那如何使用呢,在使用之前,我們先來講講瀏覽器刷新機制.

常見的瀏覽器刷新有如下幾個,Ctrl+F5,Ctrl+R,F5,還有個就是轉到,前進.不要認為前進就不是刷新了.其實這個是錯誤的.下面我們來講講這幾個區(qū)別.

Ctrl + F5:
    這個在開發(fā)過程中,經(jīng)常使用,為什么說呢,Ctrl+F5為強制刷新,讓瀏覽器不遵守緩存協(xié)議,強制的全部重新在服務器上去請求.所有資源都全部重新的去請求.
Ctrl + R|F5:
    讓瀏覽器遵守緩存協(xié)議,例如last-modified,etag等這些.如果這是服務端返回的是304就認為沒有修改,就會直接調(diào)用之前的內(nèi)容.具體的等下面在講解.用戶最多的操作
前進->:
    還有類似于這種操作,就是輸入瀏覽器直接回車.瀏覽器會將代碼Expires的并且沒有過期的全部使用,以最少的請求去請求瀏覽器.就不用擔心這種也是強制刷新了.

下面我們就來講講一些常見的用了瀏覽器緩存的例子.

在我們?yōu)g覽網(wǎng)站的時候,經(jīng)常能看到這個頭部信息,這個頭部信息是用來記錄最后一次的修改時間.如果網(wǎng)站響應的頭部信息有這個,那么下次訪問的時候,瀏覽器會帶上一個這樣的標識

If-Modified-Since:時間

然后服務端可以根據(jù)這個來判斷是不是應該可以直接使用緩存.當然,一般動態(tài)的網(wǎng)頁是很少用這種的,因為不存在傳統(tǒng)意義上的最后的修改時間.一般會用于靜態(tài)網(wǎng)站長時間不修改文件的內(nèi)容等.我們來做一個簡單示例.

這里的做法雖然并不合理,沒有判斷時間,只要存在就使用緩存.這僅僅是為了看下效果,開發(fā)程序時應該有更好的做法.讓我們來看看效果.我們把這個命令成index.php,放在localhost執(zhí)行的地址,讓我們來看看

第一次訪問,瀏覽器得到的last-modified這個響應頭,我們來看看請求頭和響應頭
--Response Headers--
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=UTF-8
Date:Fri, 11 May 2018 02:19:51 GMT
Last-Modified:Fri, 11 May 2018 01:37:15 GMT
Server:nginx/1.9.15 (Ubuntu)
Transfer-Encoding:chunked
--Request Headers--
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9
Cache-Control:no-cache
Connection:keep-alive
Host:localhost
Pragma:no-cache
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
從上面可以看出,對于第一次訪問的網(wǎng)站,瀏覽器并沒有緩存.然后當我們再次使用了F5過來,在來看看

這里我們的程序代碼是直接退出程序,沒有任何輸出,那為什么還有這個輸出,這個正式因為瀏覽器讀取自己的緩存.讓我們看看響應頭.
--Response Headers--
Connection:keep-alive
Date:Fri, 11 May 2018 02:26:57 GMT
Server:nginx/1.9.15 (Ubuntu)
這里僅有簡單的幾行,指明了web服務器和系統(tǒng),再來看看請求頭
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost
If-Modified-Since:Fri, 11 May 2018 01:37:15 GMT
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
添加了一個If-Modified-Since,讓我們來判斷有效期,這個就是讓我們來判斷是否使用瀏覽器緩存的一個標識.所以這個就讓我們的瀏覽器強制使用了緩存.
Etag
這個頭又是用來干嘛的,這個又是跟瀏覽器協(xié)商的另一種方法,它于前面的last-modified非常相似,但是它沒有用文件的最后修改時間,而是用一段編碼倆標記內(nèi)容,這個編碼并沒有強制要求,但是我們通常用一個文件內(nèi)容的md5來作為Etag.一個原則就是,如果一個內(nèi)容的Etag沒有變化,那么這個內(nèi)容也一定沒有更新.讓我們來弄一個簡單的示例.

這里我們的程序代碼是跟我們用last-modified是一樣的.對于我們來說,也是不合理的,只是用來當成示例而已方便理解.讓我們來看看執(zhí)行效果.

第一次都是強制請求,如果前面的沒有處理,就先Ctrl+F5,這里就先說明這個.具體的部署還是跟上一步的步驟一樣.讓我們看看響應頭
--Response Headers--
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=UTF-8
Date:Fri, 11 May 2018 02:45:07 GMT
Etag:W/"64ddf4c4fbf56a689c963872a8325370"
Server:nginx/1.9.15 (Ubuntu)
Transfer-Encoding:chunked
在響應頭里面增加一項,Etag,當然這個是我們的程序輸出的.用程序控制的.我們來看看F5過后的結果

我們看見響應頭中多了一個If-None-Match這個跟我們上一個請求的Etag值是一樣的.
--Request Headers--
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost
If-None-Match:W/"64ddf4c4fbf56a689c963872a8325370"
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
這個對于我們來說,在程序中我們也是直接停止了,并且報出304的狀態(tài)碼,但是瀏覽器還是作出反映了,將以前的值拿過來用了.這個就是我們的Etag
Etag和Last-Modified
既然這兩個都是用來作用瀏覽器緩存的.那誰的優(yōu)先級高呢,其實沒有優(yōu)化級,根據(jù)我們服務的處理來的.我們?nèi)绻麅?yōu)先處理Etag那就Etag值高,優(yōu)先處理Last-Modified就Last-Modified高.
另一種不同的Expires
上面兩種方式已經(jīng)說明了,但是我們還是會經(jīng)常看到,在我們退出瀏覽器過后,再次訪問這個網(wǎng)站的時候,還是讀取的緩存.顯然,我們上面兩種都不行的.不信你試試.這里我們就介紹另外一種,Expires,我們先來例子

當我們第一次訪問的時候,用localhost訪問時,會得到一張圖片.并且緩存1個小時,然后我們退出瀏覽器.并修改代碼

然后在訪問時,依然會得到我們的圖片,并沒有得到我們所謂的6個1.這個圖片已經(jīng)被瀏覽器緩存下來了.Expires是絕對時間.同理還有一個相對的,Cache-Control這里我就不演示,可以自己根據(jù)代碼來作出演示即可.
最后
我們根據(jù)以上的得出如下結果
Last-Modified -> If-Modified-Since    // 瀏覽器緩存于當前會話
Etags -> If-Modified-Since // 瀏覽器緩存當前會話
Expires    // 關閉后也有效
Cache-Control    // 關閉后也有效
我們可以根據(jù)不同的場景應用不同的緩存機制了.