http請求緩存頭詳解

anRui 發(fā)布于2019-08-01 18:42 / 850人閱讀

摘要：緩存的作用減少延遲頁面打開的速度。降低服務(wù)器負載先取緩存，無緩存在請求服務(wù)器，有效降低服務(wù)器的負擔(dān)。下圖是自己畫的，有點丑，請原諒待會講解瀏覽器與服務(wù)器進行通訊包含兩部分請求頭包含各種緩存信息。至此結(jié)束，請多多指正

緩存的作用：
1.減少延遲(頁面打開的速度)。
2.降低服務(wù)器負載(先取緩存，無緩存在請求服務(wù)器，有效降低服務(wù)器的負擔(dān))。
3.保證穩(wěn)定性(有個笑話是手機搶購時為了保證服務(wù)器的穩(wěn)定性，在前端寫個隨機數(shù)限制百分之二十的人發(fā)送數(shù)據(jù)到后臺，這也側(cè)面說明了緩存對于穩(wěn)定性的作用)。
下圖是自己畫的，有點丑，請原諒！待會講解！

瀏覽器與服務(wù)器進行通訊包含兩部分：

1.請求頭header(包含各種緩存信息)。

2.請求體bdoy(數(shù)據(jù)發(fā)送的主要內(nèi)容)

頁面緩存是由header決定的，包含四個參數(shù)：

一、Expires：
http1.0推出的，指服務(wù)器返回的文件有效期，但其實這是有缺陷的，如果把本地的時間改為2118年，那Expires的時間怎么都會過期。

二、Last-Modified：
http1.0推出的，指服務(wù)器文件的最后修改時間，瀏覽器會帶上If-Modified-Since向服務(wù)器發(fā)送請求，與服務(wù)器文件修改時間Last-Modified做對比，如果時間不同，則獲取數(shù)據(jù)返回200，否則返回304后調(diào)用瀏覽器本地硬盤的緩存。
這種方式也有問題，如果服務(wù)端文件頻繁修改保存，那么Last-Modified就會頻繁更改，每次都從服務(wù)端獲取，這也就有了http1.1的修改。

從網(wǎng)上拿了個angular.js地址試了一下，第一次返回200，第二次刷新頁面返回304。
時間：本地緩存獲取>服務(wù)器獲取

三、Cache-Control：
http1.1推出，指文件緩存的有效期。
1.max-age:單位是s，設(shè)置文件最大緩存時間，用得最多。
2.public:緩存可以被多用戶共享，例如360瀏覽器可以登錄不同賬號，電腦系統(tǒng)可以切換不同賬號。
3.private:僅單用戶私有，不被多用戶共享。
4.no-cache:不會被緩存。
5.no-store:不允許被存儲。

四、ETag
http1.1推出，該版本號是由服務(wù)端隨機生成的，瀏覽器會帶上If-None-Match向服務(wù)器發(fā)送請求，與服務(wù)器文件修改版本ETag做對比，如果版本號不同，則獲取數(shù)據(jù)返回200，否則返回304后調(diào)用瀏覽器本地硬盤的緩存，這種方式比Last-Modified靠譜。

思考？
Cache-Control+Last-Modified+ETag 的優(yōu)先級會如何？

還記得剛開始的圖嗎？
因為http1.1>http1.0，
所以Cache-Control>Expires，ETag>Last-Modified。
依照就近原則，先找本地緩存，沒有再向服務(wù)器發(fā)請求，
所以Expires>Last-Modified,Cache-Control>ETag，
如果瀏覽器只支持http1.0，那么瀏覽器只會攜帶Last-Modified發(fā)送給后臺，
如果服務(wù)器只支持http1.0，那么服務(wù)器會以Last-Modified為標準。
如果瀏覽器支持http1.1，那么瀏覽器會攜帶Cache-Control+Last-Modified+ETag發(fā)送給后臺，
如果服務(wù)器支持http1.1，那么服務(wù)器會以Cache-Control+ETag為標準。
至此結(jié)束，請多多指正！！！