JS使用Expires?max-age判斷緩存過期的瀏覽器實(shí)例
Expires (http1.0)
在HTTP Header中通過Expires字段 傳遞一個GMT格式的字符串。
舉例:
Expires: Wed Feb 20 2019 11:25:41 GMT
Cache-Control: max-age=<seconds> (http1.1)
在HTTP Header中通過Cache-Control字段中的值max-age傳遞一個max-age=<seconds>的字符串。
舉例:
Cache-Control: max-age=3600
如果Expires和Cache-Control: max-age=<seconds>二者同時存在,max-age 的優(yōu)先級高于 expires
(瀏覽器會根據(jù) max-age 指令的值來決定緩存的有效期,而忽略 Expires)
上面這段話是在中文互聯(lián)網(wǎng)上出現(xiàn)的很多的內(nèi)容,表述可能不一樣,但是內(nèi)容就是這些了。
那么瀏覽器到底怎么判斷緩存過期?用max-age判斷緩存過期是否與本地時間有關(guān)?
在中文互聯(lián)網(wǎng)的論壇中,基本都是說Expires字段設(shè)置的緩存過期時間會受本地時間影響,max-age設(shè)置的緩存過期時間不會受本地時間影響。
max-age設(shè)置緩存后
-那么在使用max-age設(shè)置緩存后,瀏覽器到底怎么判斷緩存過期?判斷緩存過期是否與本地時間有關(guān)?
看我下面這個問題場景。
如果HTTP響應(yīng)中包含以下頭部:
Date: Wed, 16 Oct 2019 07:42:37 GMT
Cache-Control: max-age=3600
按照中文互聯(lián)網(wǎng)上的常見表述
"瀏覽器記錄下max-age的時間點(diǎn)是通過在HTTP響應(yīng)中的Date頭部來完成的。
Date頭部指示了服務(wù)器響應(yīng)請求的時間,它通常以格林威治標(biāo)準(zhǔn)時間 (GMT) 格式表示。"
那么瀏覽器會計(jì)算出資源的有效期截止時間為Wed, 16 Oct 2019 08:42:37 GMT,(即當(dāng)前時間加上max-age指定的秒數(shù)) 。瀏覽器會記錄這個時間點(diǎn),以便后續(xù)請求時判斷資源是否過期。
問題
當(dāng)瀏覽器第二次發(fā)請求的時候,瀏覽器是否需要找到一個時間節(jié)點(diǎn)T2 來判定T2與 Wed, 16 Oct 2019 08:42:37 GMT的大小關(guān)系?
-如果需要T2,那么T2如何取值? (是否受本地時間的影響?)
-如果不需要T2,那么瀏覽器通過什么來判定這個緩存是否過期?
下面開始進(jìn)入正題,查證的過程中我發(fā)現(xiàn)有不少(錯誤的)內(nèi)容在中文互聯(lián)網(wǎng)上被互相轉(zhuǎn)載,站站相傳,屬實(shí)離譜。
本文引用材料均有出處。各位讀者可以點(diǎn)link查看。
以chromium內(nèi)核的實(shí)現(xiàn)為例來說明
1、判斷緩存是否過期
https://github.com/chromium/chromium/blob/main/net/http/http_response_headers.cc#L1107-L1114
公式如下:
response_is_fresh = (freshness_lifetime > current_age)
這里有個字段 response_is_fresh (相應(yīng)依舊新鮮)
字面理解,如果response_is_fresh為true,則表示緩存未過期。
如果保鮮時間(freshness_lifetime) 大于 當(dāng)前經(jīng)歷時間(current_age),則表示緩存未過期。
再往下看,找到freshness_lifetime和current_age的計(jì)算方法。
2、freshness_lifetime的計(jì)算 ( 保鮮時間(有效期)的計(jì)算 )
https://github.com/chromium/chromium/blob/main/net/http/http_response_headers.cc#L1141-L1163
這段話里明確說明max-age的優(yōu)先級大于expires
如果有max-age
freshness_lifetime = max_age_value如果沒有max-age
freshness_lifetime = expires_value - date_value
看1152 1153兩行
Note that neither of these calculations is vulnerable to clock skew, since all of the information comes from the origin server
"注意,這兩種計(jì)算方式都不會受到時鐘偏差的影響,因?yàn)樗行畔⒍紒碜杂谠捶?wù)器。"
也就是說,不論是用max-age還是expires計(jì)算freshness_lifetime,都不會受到時鐘偏差的影響。
3、current_age的計(jì)算 ( 當(dāng)前經(jīng)歷時間的計(jì)算 )
https://github.com/chromium/chromium/blob/main/net/http/http_response_headers.cc#L1264-L1332
// From RFC 7234 section 4.2.3: // // The following data is used for the age calculation: // // age_value // // The term "age_value" denotes the value of the Age header field // (Section 5.1), in a form appropriate for arithmetic operation; or // 0, if not available. // // date_value // // The term "date_value" denotes the value of the Date header field, // in a form appropriate for arithmetic operations. See Section // 7.1.1.2 of [RFC7231] for the definition of the Date header field, // and for requirements regarding responses without it. // // now // // The term "now" means "the current value of the clock at the host // performing the calculation". A host ought to use NTP ([RFC5905]) // or some similar protocol to synchronize its clocks to Coordinated // Universal Time. // // request_time // // The current value of the clock at the host at the time the request // resulting in the stored response was made. // // response_time // // The current value of the clock at the host at the time the // response was received. // // The age is then calculated as // // apparent_age = max(0, response_time - date_value); // response_delay = response_time - request_time; // corrected_age_value = age_value + response_delay; // corrected_initial_age = max(apparent_age, corrected_age_value); // resident_time = now - response_time; // current_age = corrected_initial_age + resident_time;
1264行到1305行,這一段注釋里的now,對應(yīng)下面HttpResponseHeaders::GetCurrentAge這個方法中的current_time(L1328)
The term "now" means "the current value of the clock at the host performing the calculation". A host ought to use NTP ([RFC5905]) or some similar protocol to synchronize its clocks to Coordinated Universal Time.
關(guān)于now的注釋這里寫明了
"now"一詞表示"執(zhí)行計(jì)算的主機(jī)上時鐘的當(dāng)前值"。主機(jī)應(yīng)該使用NTP([RFC5905])或類似協(xié)議將其時間與世界時鐘同步。
那么current_age的計(jì)算是需要依賴于客戶端主機(jī)的本地時鐘的。
回到這個問題
如果HTTP響應(yīng)中包含以下頭部:
Date: Wed, 16 Oct 2019 07:42:37 GMT
Cache-Control: max-age=3600
當(dāng)瀏覽器第二次發(fā)請求的時候,瀏覽器是否需要找到一個時間節(jié)點(diǎn)T2來判定T2與 Wed, 16 Oct 2019 08:42:37 GMT的大小關(guān)系?
-如果需要T2,那么T2如何取值? (是否受本地時間的影響?)
-如果不需要T2,那么瀏覽器通過什么來判定這個緩存是否過期?
總結(jié)
(chromium內(nèi)核的)瀏覽器用的是比較freshness_lifetime(約等于max-age,保鮮時間,是一個時間跨度)和current_age(當(dāng)前經(jīng)歷時間,也是一個時間跨度)來計(jì)算有效期。
不需要時間節(jié)點(diǎn)T2。
計(jì)算freshness_lifetime用的是服務(wù)器時間, 不受本地時間影響。
但計(jì)算current_age用到了本地時間(current_time, 也就是注釋中的now),而且沒法保證本地時間與服務(wù)器時間一致。
因此,不論是Expires還是Cache-Control: max-age=<seconds> 計(jì)算緩存有效期的時候,都會受到本地時間的影響。
以上就是JS使用Expires max-age判斷緩存過期的瀏覽器實(shí)例的詳細(xì)內(nèi)容,更多關(guān)于js瀏覽器緩存判斷的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript數(shù)據(jù)操作_淺談原始值和引用值的操作本質(zhì)
下面小編就為大家?guī)硪黄狫avaScript數(shù)據(jù)操作_淺談原始值和引用值的操作本質(zhì)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08JavaScript實(shí)現(xiàn)留言板實(shí)戰(zhàn)案例
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)留言板的相關(guān)資料,使用JavaScript來編寫留言板功能相信大家都不陌生,文中給出了詳細(xì)的示例代碼,需要的朋友可以參考下2023-07-07JS移動端/H5同時選擇多張圖片上傳并使用canvas壓縮圖片
這篇文章主要介紹了JS移動端/H5同時選擇多張圖片上傳并使用canvas壓縮圖片,需要的朋友可以參考下2017-06-06javascript實(shí)現(xiàn)簡單下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡單下拉菜單效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一2022-08-08Bootstrap Multiselect 常用組件實(shí)現(xiàn)代碼
bootstrap-multiselect插件是一款基于bootstrap的下拉框美化插件,我們一般用來請求后臺返回具有l(wèi)abel和text對象的json數(shù)組即可渲染。接下來通過本文給大家分享Bootstrap Multiselect 常用組件實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2017-07-07