摘要:瀏覽器執行機制瀏覽器對于請求資源擁有一系列成熟的緩存策略。只要有相應的緩存響應頭要求緩存,瀏覽器客戶端都會對資源緩存一份,當然緩存響應頭也有優先級的。緩存模式瀏覽器緩存可以分為兩種模式,強緩存和協商緩存。具體請看上面的瀏覽器緩存流程圖。
緩存是提升用戶訪問速度,節省帶寬,減輕服務器壓力的必經之道。
下面都是針對的Http 1.1來說明,HTTP緩存都是針對瀏覽器客戶端,其他第三方客戶端不考慮。什么是瀏覽器緩存
簡單來說,瀏覽器緩存就是把一個已經請求過的Web資源(如html,圖片,js)拷貝一份副本儲存在瀏覽器中。緩存會根據進來的請求保存輸出內容的副本。當下一個請求來到的時候,如果是相同的URL,緩存會根據緩存機制決定是直接使用副本響應訪問請求,還是向源服務器再次發送請求(當然還有304的情況)。
緩存是根據url來處理的,只要url不一樣就是新的資源。
瀏覽器HTTP執行機制瀏覽器對于請求資源, 擁有一系列成熟的緩存策略。
只要有相應的緩存響應頭(要求緩存),瀏覽器客戶端都會對資源緩存一份,當然緩存響應頭也有優先級的。
緩存模式瀏覽器緩存可以分為兩種模式,強緩存和協商緩存。
強緩存(無HTTP請求,無需協商)
直接讀取本地緩存,無需跟服務端發送請求確認,http返回狀態碼是200(from memory cache或者from disk cache ,不同瀏覽器返回的信息不一致的)。
對應的Http header有:
Cache-Control
Expires
協商緩存(有HTTP請求,需協商)
瀏覽器雖然發現了本地有該資源的緩存,但是不確定是否是最新的,于是想服務器詢問,若服務器認為瀏覽器的緩存版本還可用,那么便會返回304(Not Modified) http狀態碼。
對應的Http header有:
Last-Modified
ETag
流程圖流程圖只考慮了200和304的狀態碼,其他異常狀態碼不考慮。
Http Header包括請求頭和響應頭,http1.1會向前兼用的,會兼容http1.0的Http header,瀏覽器還有web服務一般都會考慮進去。
Http Header | 描述 |
---|---|
Cache-Control | 指定緩存機制,優先級最高 |
Pragma | http1.0字段,已廢棄,為了兼容一般使用no-cache |
Expires | http1.0字段,指定緩存的過期時間(為了兼容) |
Last-Modified | http1.0字段,資源最后一次的修改時間 |
ETag | 唯一標識請求資源的字符串,會覆蓋Last-Modified |
瀏覽器緩存里, Cache-Control是金字塔頂尖的規則, 它藐視一切其他設置, 只要其他設置與其抵觸, 一律覆蓋之.
不僅如此, 它還是一個復合規則, 包含多種值,同時在請求頭和響應頭都可設置(基本都可以)。
下面列舉了常用的Cache-Control用法。
Cache-Control | 描述 |
---|---|
no-store | 請求和響應都不緩存 |
no-cache | 相當于max-age:0,即資源被緩存, 但是緩存立刻過期, 同時下次訪問時強制驗證資源有效性 |
max-age | 緩存資源, 但是在指定時間(單位為秒)后緩存過期 |
http1.0中存在的字段,該字段所定義的緩存時間是相對服務器上的時間而言的,如果客戶端上的時間跟服務器上的時間不一致(特別是用戶修改了自己電腦的系統時間),那緩存時間可能就沒啥意義了。在HTTP 1.1版開始,使用Cache-Control: max-age=秒替代,這樣就不存在不一致問題了。
Last-ModifiedLast-Modified和If-Modified-Since是一對的。
當瀏覽器第一次請求一個url時,服務器端的返回狀態碼為200,同時HTTP響應頭會有一個Last-Modified標記著文件在服務器端最后被修改的時間。
瀏覽器第二次請求上次請求過的url時,瀏覽器會在HTTP請求頭添加一個If-Modified-Since的標記,用來詢問服務器該時間之后文件是否被修改過。
但是Last-Modified是http1.0的產物,有兩個缺點:
只能精確到秒級別
內容完全沒改變的資源文件,無法識別出來(只要修改時間變了,就算變動)。
所有就有了ETag。
ETagETag解決了Last-Modified的缺點,http1.1的字段,優先級高于Last-Modified。
理論上是ETag優先于Last-Modified,但是Nginx一會把這兩個一起開啟一起驗證,而且Nginx ETag的計算方式把最后修改時間也算進去了(所有這個算是弱ETag)。
Nginx ETag計算方式:計算頁面文件的最后修改時間,將文件最后修改時間的秒級Unix時間戳轉為16進制作為etag的第一部分 計算頁面文件的大小,將大小字節數轉為16進制作為etag的第二部分。
ETag有兩種類型:
強ETag
強ETag值,不論實體發生多么細微的變化都會改變其值。
強ETag表示形式:"22FAA065-2664-4197-9C5E-C92EA03D0A16"。
弱ETag
弱 ETag 值只用于提示資源是否相同。只有資源發生了根本改變產 生差異時才會改變 ETag?。這時,會在字段值最開始處附加 W/。
弱ETag表現形式:W/"22FAA065-2664-4197-9C5E-C92EA03D0A16"。
ETag和If-None-Match是一對:
當瀏覽器第一次請求一個url時,服務器端的返回狀態碼為200,同時HTTP響應頭會有一個Etag,存放著服務器端生成的一個序列值。
瀏覽器第二次請求上次請求過的url時,瀏覽器會在HTTP請求頭添加一個If-None-Match的標記,用來詢問服務器該文件有沒有被修改。
一般網站都會把Last-Modified和ETag一起用,同時對對比,兩個條件都滿足了才會返回304。
Nginx實例用實例來說明,Nginx的安裝和使用請自行網上學習,例子的環境是在Mac系統運行的,然后在谷歌瀏覽器上訪問(不同瀏覽器的表現會有點不一樣的,而且瀏覽器還有快捷鍵直接刷新跳過緩存的)。
注意:nginx在沒有設置Cache-Control:max-age=xxx和expires時,谷歌訪問后,后面會變成200(from memory cache),然后就造成了文件修改后無法更新的問題(不知道什么時候過期)。這個也很好解決,只要設置過期時間為0,這樣就一定不是強緩存,就不存在這些問題。
下面的例子Http Header只需要關注上面提到的相關字段。
ETag和Last-Modified例子Nginx默認開啟ETag和Last-Modified。
由于Nginx ETag可知,ETag比Last-Modified多了文件大小比較,理論上有ETag就可以不用Last-Modified,但是為了兼容http1.0,很多web服務器都會帶上Last-Modified。
Etag關閉如下:
etag off;
Last-Modified關閉如下(沒有找到具體關閉方式,只好在響應頭中直接賦值為空):
add_header "Last-Modified" "" always;
這些配置,可以隨便設置在不同層級,http、server、location都可以。
默認的Nginx是同時開啟的,所以不用處理什么。
server { listen 80; server_name localhost; location / { #定義自己的web服務根目錄 root /Users/Sam/www; #默認訪問文件夾時,訪問index.html或者index.htm文件 index index.html index.htm; location ~* .(jpg|jpeg|gif|bmp|png|js|css){ #nginx在沒有設置Cache-Control:max-age=xxx和expires時, #谷歌訪問后,后面會變成200(from memory cache), #然后就造成了文件修改后無法更新的問題。 #這個很好解決,只要設置過期時間為0,這樣就一定不是強緩存,就不存在這些問題 expires 0s; } } }
然后在根目錄index.html中引入./test.js文件,然后訪問index.html。
首次訪問,返回200,然后再次訪問才會返回304。然后無論如何修改,只要文件被保存(即使內容不變),再次訪問瀏覽器返回200,然后再次訪問返回304(內容沒修改)。
首次訪問 Http Header(先清理緩存,才算首次訪問)
#通用的header Request URL: http://localhost/test.js Request Method: GET Status Code: 200 OK Remote Address: 127.0.0.1:80 Referrer Policy: no-referrer-when-downgrade #響應頭 Cache-Control: max-age=0 Connection: keep-alive Content-Encoding: gzip Content-Type: application/javascript Date: Thu, 27 Sep 2018 03:21:00 GMT ETag: W/"5bab7b36-15" Expires: Thu, 27 Sep 2018 03:21:00 GMT Last-Modified: Wed, 26 Sep 2018 12:27:34 GMT Server: nginx/1.10.1 Transfer-Encoding: chunked #請求頭 Accept: */* Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 Connection: keep-alive Host: localhost Referer: http://localhost/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
第二次訪問 Http Header(無修改)
#通用的header Request URL: http://localhost/test.js Request Method: GET Status Code: 304 Not Modified Remote Address: 127.0.0.1:80 Referrer Policy: no-referrer-when-downgrade #響應頭 Cache-Control: max-age=0 Connection: keep-alive Date: Thu, 27 Sep 2018 03:23:22 GMT ETag: "5bab7b36-15" Expires: Thu, 27 Sep 2018 03:23:22 GMT Last-Modified: Wed, 26 Sep 2018 12:27:34 GMT Server: nginx/1.10.1 #請求頭 Accept: */* Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 Connection: keep-alive Host: localhost If-Modified-Since: Wed, 26 Sep 2018 12:27:34 GMT If-None-Match: W/"5bab7b36-15" Referer: http://localhost/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
第三次訪問 Http Header(有修改)
#通用的header Request URL: http://localhost/test.js Request Method: GET Status Code: 200 OK Remote Address: 127.0.0.1:80 Referrer Policy: no-referrer-when-downgrade #響應頭 Cache-Control: max-age=0 Connection: keep-alive Content-Encoding: gzip Content-Type: application/javascript Date: Thu, 27 Sep 2018 03:25:14 GMT ETag: W/"5bac4d98-15" Expires: Thu, 27 Sep 2018 03:25:14 GMT Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT Server: nginx/1.10.1 Transfer-Encoding: chunked #請求頭 Accept: */* Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 Connection: keep-alive Host: localhost If-Modified-Since: Wed, 26 Sep 2018 12:27:34 GMT If-None-Match: W/"5bab7b36-15" Referer: http://localhost/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
第四次訪問 Http Header(無修改)
#通用的header Request URL: http://localhost/test.js Request Method: GET Status Code: 304 Not Modified Remote Address: 127.0.0.1:80 Referrer Policy: no-referrer-when-downgrade #響應頭 Cache-Control: max-age=0 Connection: keep-alive Date: Thu, 27 Sep 2018 03:26:46 GMT ETag: "5bac4d98-15" Expires: Thu, 27 Sep 2018 03:26:46 GMT Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT Server: nginx/1.10.1 #請求頭 Accept: */* Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 Connection: keep-alive Host: localhost If-Modified-Since: Thu, 27 Sep 2018 03:25:12 GMT If-None-Match: W/"5bac4d98-15" Referer: http://localhost/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36Cache-Control 和 Expires
server { listen 80; server_name localhost; location / { #定義自己的web服務根目錄 root /Users/Sam/www; #默認訪問文件夾時,訪問index.html或者index.htm文件 index index.html index.htm; location ~* .(jpg|jpeg|gif|bmp|png|js|css){ #設置30秒緩存有效期 expires 30s; } } }
然后在根目錄index.html中引入./test.js文件,然后訪問index.html。
首次訪問,瀏覽器會返回200,然后再次訪問才會返回200(from memory cache),然后30秒后過期訪問,如果文件沒修過過,會返回304,否則返回200,繼續訪問如果沒過期期,返回200(from memory cache)。
具體請看上面的瀏覽器緩存流程圖。
首次訪問 Http Header(先清理緩存,才算首次)
#通用的header Request URL: http://localhost/test.js Request Method: GET Status Code: 200 OK Remote Address: 127.0.0.1:80 Referrer Policy: no-referrer-when-downgrade #響應頭 Cache-Control: max-age=30 Connection: keep-alive Content-Encoding: gzip Content-Type: application/javascript Date: Thu, 27 Sep 2018 03:28:03 GMT ETag: W/"5bac4d98-15" Expires: Thu, 27 Sep 2018 03:28:33 GMT Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT Server: nginx/1.10.1 Transfer-Encoding: chunked #請求頭 Accept: */* Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 Connection: keep-alive Host: localhost Referer: http://localhost/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
第二次訪問 Http Header(不能過期,上面設置的是30秒,要在上次訪問的30秒內再次訪問)
#通用的header Request URL: http://localhost/test.js Request Method: GET Status Code: 200 OK (from memory cache) Remote Address: 127.0.0.1:80 Referrer Policy: no-referrer-when-downgrade #響應頭 Cache-Control: max-age=30 Connection: keep-alive Content-Encoding: gzip Content-Type: application/javascript Date: Thu, 27 Sep 2018 03:28:03 GMT ETag: W/"5bac4d98-15" Expires: Thu, 27 Sep 2018 03:28:33 GMT Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT Server: nginx/1.10.1 Transfer-Encoding: chunked #請求頭 Accept: */* Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 Connection: keep-alive Host: localhost Referer: http://localhost/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
第三次訪問 Http Header(需要過期,上面設置的是30秒,上一次訪問等待30秒后訪問)
#通用的header Request URL: http://localhost/test.js Request Method: GET Status Code: 304 Not Modified Remote Address: 127.0.0.1:80 Referrer Policy: no-referrer-when-downgrade #響應頭 Cache-Control: max-age=30 Connection: keep-alive Date: Thu, 27 Sep 2018 03:32:44 GMT ETag: "5bac4d98-15" Expires: Thu, 27 Sep 2018 03:33:14 GMT Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT Server: nginx/1.10.1 #請求頭 Accept: */* Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 Connection: keep-alive Host: localhost If-Modified-Since: Thu, 27 Sep 2018 03:25:12 GMT If-None-Match: W/"5bac4d98-15" Referer: http://localhost/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
第四次訪問 Http Header(不能過期,上面設置的是30秒,要在上次訪問的30秒內再次訪問修改后的文件)
訪問獲取的還是舊文件,文件雖然修改了,但是瀏覽器直接緩存中獲取,沒發出請求,無法獲取最新的內容。
#通用的header Request URL: http://localhost/test.js Request Method: GET Status Code: 200 OK (from memory cache) Remote Address: 127.0.0.1:80 Referrer Policy: no-referrer-when-downgrade #響應頭 Cache-Control: max-age=30 Connection: keep-alive Content-Encoding: gzip Content-Type: application/javascript Date: Thu, 27 Sep 2018 03:28:03 GMT ETag: W/"5bac4d98-15" Expires: Thu, 27 Sep 2018 03:28:33 GMT Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT Server: nginx/1.10.1 #請求頭 Transfer-Encoding: chunked Accept: */* Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 Connection: keep-alive Host: localhost Referer: http://localhost/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
第五次訪問 Http Header(需過期,在第四次訪問后等待30秒訪問修改后的文件)
訪問后獲取到了最新文件。
#通用的header Request URL: http://localhost/test.js Request Method: GET Status Code: 200 OK Remote Address: 127.0.0.1:80 Referrer Policy: no-referrer-when-downgrade #響應頭 Cache-Control: max-age=30 Connection: keep-alive Content-Encoding: gzip Content-Type: application/javascript Date: Thu, 27 Sep 2018 03:36:51 GMT ETag: W/"5bac4fcc-15" Expires: Thu, 27 Sep 2018 03:37:21 GMT Last-Modified: Thu, 27 Sep 2018 03:34:36 GMT Server: nginx/1.10.1 Transfer-Encoding: chunked #請求頭 Accept: */* Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 Connection: keep-alive Host: localhost If-Modified-Since: Thu, 27 Sep 2018 03:25:12 GMT If-None-Match: W/"5bac4d98-15" Referer: http://localhost/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36不需要緩存的場景
緩存是會提升訪問速度、節省帶寬、減輕服務器壓力,但是也不能濫用,否則會出現一些意想不到的問題。圖片、css、js等資源文件一般都是需要緩存的,但是像接口數據等數據會變動的http請求都是不需要緩存的,否則會造成無法訪問到新數據的情況。
場景html文件不需要強緩存,協商緩存就行了。
這些都是特殊情況,html文件可以返回304狀態,但是不要返回200(from memory cache)。html文件最好設置過期時間為0,強制跟服務器做文件修改對比(當然具體場景具體分析)。
因為js文件和css文件是可以使用版本做控制或者隨機數。
js代碼版本迭代更新
這個場景不是不需要緩存,而是更新了js代碼版本,但是如果用戶還在緩存期內,就會導致頁面出錯。
這種情況就需要進行js類庫版本控制,如:
升級到到2.0.0時,我們需要把代碼改成
這樣就不會訪問到緩存的jquery.js。緩存是根據url來處理的,只要url不一樣就是新的資源。
前后端使用ajax請求接口數據
解決方式Url添加隨機數
這種情況,是前端做處理。
請求頭添加Cache-Control: no-cache
為了兼容http1.0,而外添加Pragma: no-cache,Cache-Control的選項有很多,具體如何選擇,看場景。
前端或者服務端都可以處理。
一些說明做一些補充說明。
memory cache 和 disk cache這個兩個說明是谷歌瀏覽器的狀態碼附加提示語,內存緩存和磁盤緩存。其實很簡單,只要頁面在網頁上打開訪問,然后不關閉,刷新的一定是from memory cache,而頁面關閉在打開一定是from disk cache。這是瀏覽器自身的緩存手段,磁盤緩存一定會有一份備份的,然后頁面訪問的時候也會在內存中緩存一份,這樣刷新當前頁面就不會讀取硬盤,而是直接內存中獲取(減少訪問磁盤的次數)。
不同瀏覽器的一些表現差異不同瀏覽器的緩存手段是一致的,但是文案展現形式,和刷新頁面的方式會有差異(如火狐瀏覽器點擊刷新按鈕和回車刷新是不一樣的)。
下面是針對已經強緩存,同時訪問文件無修改的情況下,不同刷新方式返回的狀態碼總結(mac系統):
瀏覽器 | 點擊地址欄刷新按鈕 | 回車刷新 | cmd + r刷新 |
---|---|---|---|
谷歌 | 200(from memory cache) | 200(from memory cache) | 200(from memory cache) |
火狐 | 304 | 200,其他地方說明已緩存 | 304 |
safari | 200,其他地方說明已緩存 | 200,其他地方說明已緩存 | 200,其他地方說明已緩存 |
這里只說明下可能會遇到的疑惑。瀏覽器軟件自身的處理方式,跟http緩存掛不上鉤,我們也無法處理。
參考文章304和瀏覽器http緩存
瀏覽器緩存機制剖析
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/62027.html
摘要:目的是克服由所帶來的一些限制,當數據需要被嚴格控制在客戶端時,不需要持續的將數據發回服務器。的生命周期是在僅在當前會話下有效。但是在關閉了瀏覽器窗口后就會被銷毀。刪除單個數據,根據鍵值移除對應的信息。 導語 我們在做項目的時候,經常把Cookie和Session掛在嘴邊,可實際對于他們了解的也是很少,只是會使用,但這遠遠不夠,熟練的掌握他們的特性才能把項目做的更好。下面我們就來認識一下...
閱讀 3522·2021-10-08 10:04
閱讀 869·2019-08-30 15:54
閱讀 2185·2019-08-29 16:09
閱讀 1352·2019-08-29 15:41
閱讀 2279·2019-08-29 11:01
閱讀 1739·2019-08-26 13:51
閱讀 1030·2019-08-26 13:25
閱讀 1814·2019-08-26 13:24