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

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

常見的瀏覽器刷新有如下幾個(gè),Ctrl+F5,Ctrl+R,F5,還有個(gè)就是轉(zhuǎn)到,前進(jìn).不要認(rèn)為前進(jìn)就不是刷新了.其實(shí)這個(gè)是錯(cuò)誤的.下面我們來講講這幾個(gè)區(qū)別.

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

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

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

If-Modified-Since:時(shí)間

然后服務(wù)端可以根據(jù)這個(gè)來判斷是不是應(yīng)該可以直接使用緩存.當(dāng)然,一般動(dòng)態(tài)的網(wǎng)頁是很少用這種的,因?yàn)椴淮嬖趥鹘y(tǒng)意義上的最后的修改時(shí)間.一般會(huì)用于靜態(tài)網(wǎng)站長時(shí)間不修改文件的內(nèi)容等.我們來做一個(gè)簡單示例.

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

第一次訪問,瀏覽器得到的last-modified這個(gè)響應(yīng)頭,我們來看看請(qǐng)求頭和響應(yīng)頭
--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
從上面可以看出,對(duì)于第一次訪問的網(wǎng)站,瀏覽器并沒有緩存.然后當(dāng)我們?cè)俅问褂昧薋5過來,在來看看

這里我們的程序代碼是直接退出程序,沒有任何輸出,那為什么還有這個(gè)輸出,這個(gè)正式因?yàn)闉g覽器讀取自己的緩存.讓我們看看響應(yīng)頭.
--Response Headers--
Connection:keep-alive
Date:Fri, 11 May 2018 02:26:57 GMT
Server:nginx/1.9.15 (Ubuntu)
這里僅有簡單的幾行,指明了web服務(wù)器和系統(tǒng),再來看看請(qǐ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
添加了一個(gè)If-Modified-Since,讓我們來判斷有效期,這個(gè)就是讓我們來判斷是否使用瀏覽器緩存的一個(gè)標(biāo)識(shí).所以這個(gè)就讓我們的瀏覽器強(qiáng)制使用了緩存.
Etag
這個(gè)頭又是用來干嘛的,這個(gè)又是跟瀏覽器協(xié)商的另一種方法,它于前面的last-modified非常相似,但是它沒有用文件的最后修改時(shí)間,而是用一段編碼倆標(biāo)記內(nèi)容,這個(gè)編碼并沒有強(qiáng)制要求,但是我們通常用一個(gè)文件內(nèi)容的md5來作為Etag.一個(gè)原則就是,如果一個(gè)內(nèi)容的Etag沒有變化,那么這個(gè)內(nèi)容也一定沒有更新.讓我們來弄一個(gè)簡單的示例.

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

第一次都是強(qiáng)制請(qǐng)求,如果前面的沒有處理,就先Ctrl+F5,這里就先說明這個(gè).具體的部署還是跟上一步的步驟一樣.讓我們看看響應(yīng)頭
--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
在響應(yīng)頭里面增加一項(xiàng),Etag,當(dāng)然這個(gè)是我們的程序輸出的.用程序控制的.我們來看看F5過后的結(jié)果

我們看見響應(yīng)頭中多了一個(gè)If-None-Match這個(gè)跟我們上一個(gè)請(qǐng)求的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
這個(gè)對(duì)于我們來說,在程序中我們也是直接停止了,并且報(bào)出304的狀態(tài)碼,但是瀏覽器還是作出反映了,將以前的值拿過來用了.這個(gè)就是我們的Etag
Etag和Last-Modified
既然這兩個(gè)都是用來作用瀏覽器緩存的.那誰的優(yōu)先級(jí)高呢,其實(shí)沒有優(yōu)化級(jí),根據(jù)我們服務(wù)的處理來的.我們?nèi)绻麅?yōu)先處理Etag那就Etag值高,優(yōu)先處理Last-Modified就Last-Modified高.
另一種不同的Expires
上面兩種方式已經(jīng)說明了,但是我們還是會(huì)經(jīng)常看到,在我們退出瀏覽器過后,再次訪問這個(gè)網(wǎng)站的時(shí)候,還是讀取的緩存.顯然,我們上面兩種都不行的.不信你試試.這里我們就介紹另外一種,Expires,我們先來例子

當(dāng)我們第一次訪問的時(shí)候,用localhost訪問時(shí),會(huì)得到一張圖片.并且緩存1個(gè)小時(shí),然后我們退出瀏覽器.并修改代碼

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