瀏覽器緩存機制

蘇丹發布于2019-08-15 15:56 / 2561人閱讀

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

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

瀏覽器刷新

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

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

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

Last-modified

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

If-Modified-Since:時間

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

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

第一次訪問,瀏覽器得到的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

從上面可以看出,對于第一次訪問的網站,瀏覽器并沒有緩存.然后當我們再次使用了F5過來,在來看看

這里我們的程序代碼是直接退出程序,沒有任何輸出,那為什么還有這個輸出,這個正式因為瀏覽器讀取自己的緩存.讓我們看看響應頭.

--Response Headers--
Connection:keep-alive
Date:Fri, 11 May 2018 02:26:57 GMT
Server:nginx/1.9.15 (Ubuntu)

這里僅有簡單的幾行,指明了web服務器和系統,再來看看請求頭

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

這個頭又是用來干嘛的,這個又是跟瀏覽器協商的另一種方法,它于前面的last-modified非常相似,但是它沒有用文件的最后修改時間,而是用一段編碼倆標記內容,這個編碼并沒有強制要求,但是我們通常用一個文件內容的md5來作為Etag.一個原則就是,如果一個內容的Etag沒有變化,那么這個內容也一定沒有更新.讓我們來弄一個簡單的示例.

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

第一次都是強制請求,如果前面的沒有處理,就先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的狀態碼,但是瀏覽器還是作出反映了,將以前的值拿過來用了.這個就是我們的Etag

Etag和Last-Modified

既然這兩個都是用來作用瀏覽器緩存的.那誰的優先級高呢,其實沒有優化級,根據我們服務的處理來的.我們如果優先處理Etag那就Etag值高,優先處理Last-Modified就Last-Modified高.

另一種不同的Expires

上面兩種方式已經說明了,但是我們還是會經常看到,在我們退出瀏覽器過后,再次訪問這個網站的時候,還是讀取的緩存.顯然,我們上面兩種都不行的.不信你試試.這里我們就介紹另外一種,Expires,我們先來例子

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

然后在訪問時,依然會得到我們的圖片,并沒有得到我們所謂的6個1.這個圖片已經被瀏覽器緩存下來了.Expires是絕對時間.同理還有一個相對的,Cache-Control這里我就不演示,可以自己根據代碼來作出演示即可.

最后

我們根據以上的得出如下結果

Last-Modified -> If-Modified-Since    // 瀏覽器緩存于當前會話
Etags -> If-Modified-Since // 瀏覽器緩存當前會話
Expires    // 關閉后也有效
Cache-Control    // 關閉后也有效

我們可以根據不同的場景應用不同的緩存機制了.

GPU云服務器云服務器三級緩存機制 cdn緩存機制 php緩存機制 android緩存機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/69335.html

Web緩存相關知識整理

摘要：緩存緩存，也叫網關緩存反向代理緩存。瀏覽器先向網關發起請求，網關服務器后面對應著一臺或多臺負載均衡源服務器，會根據它們的負載請求，動態將請求轉發到合適的源服務器上。雖然這種架構負載均衡源服務器之間的緩存沒法共享，但卻擁有更好的處擴展性。一、前言? 工作上遇到一個這樣的需求，一個H5頁面在APP端，如果勾選已讀狀態，則下次打開該鏈接，會跳過此頁面。用到了HTML5 的本地存儲 API ...

rickchen 2019-08-06 13:23 評論0 收藏0
H5 緩存機制淺析 - 移動端 Web 加載性能優化

摘要：根據標準，到目前為止，一共有種緩存機制，有些是之前已有，有些是才新加入的。首次請求緩存有效期內請求緩存過期后請求一般瀏覽器會將緩存記錄及緩存文件存在本地文件夾中。騰訊 Bugly 特約作者：賀輝超 1. H5 緩存機制介紹 H5，即 HTML5，是新一代的 HTML 標準，加入很多新的特性。離線存儲（也可稱為緩存機制）是其中一個非常重要的特性。H5 引入的離線存儲，這意味著 web ...

alin 2019-08-06 13:14 評論0 收藏0
瀏覽器緩存是什么？它的機制又是什么？

摘要：對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。那么瀏覽器緩存究竟是個什么樣的神奇玩意呢什么是瀏覽器緩存簡單來說，瀏覽器緩存就是把一個已經請求過的資源如頁面，圖片，，數據等拷貝一份副本儲存在瀏覽器中。對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。一方面極大地提升了用戶體驗，而另一方面有時會因為讀取了緩存而展示了錯誤的東西，而在開發過程中千方百計地想把緩存禁掉。那么瀏覽器緩存究竟...

jsummer 2019-08-06 13:37 評論0 收藏0
瀏覽器緩存是什么？它的機制又是什么？

摘要：對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。那么瀏覽器緩存究竟是個什么樣的神奇玩意呢什么是瀏覽器緩存簡單來說，瀏覽器緩存就是把一個已經請求過的資源如頁面，圖片，，數據等拷貝一份副本儲存在瀏覽器中。對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。一方面極大地提升了用戶體驗，而另一方面有時會因為讀取了緩存而展示了錯誤的東西，而在開發過程中千方百計地想把緩存禁掉。那么瀏覽器緩存究竟...

godruoyi 2019-08-16 13:43 評論0 收藏0
瀏覽器的緩存機制

摘要：從瀏覽器角度來看，整個就是一個源服務器，從這個層面來說，瀏覽器和服務器之間的緩存機制，在這種架構下同樣適用。如果命中，則返回，告訴瀏覽器資源未更新，可使用本地的緩存。緩存類型緩存在宏觀上可以分成兩類：私有緩存和共享緩存。共享緩存就是那些能被各級代理緩存的緩存。私有緩存就是用戶專享的，各級代理不能緩存的緩存。微觀上可以分下面幾類：瀏覽器緩存緩存存在的意義就是當用戶點擊back按...

LeanCloud 2019-08-06 13:41 評論0 收藏0