瀏覽器的緩存機(jī)制
? 在前端開發(fā)中，性能一直是一個(gè)非常重要的部分，其中一個(gè)非常重要的判斷標(biāo)準(zhǔn)就是一個(gè)網(wǎng)頁打開的速度，其中一個(gè)提高網(wǎng)頁反應(yīng)速度的非常重要的方式就是利用瀏覽器的緩存機(jī)制，良好的緩存策略可以降低資源的重復(fù)加載提高網(wǎng)頁的整體加載速度，減少請(qǐng)求的延遲，降低網(wǎng)絡(luò)負(fù)荷。
通常瀏覽器緩存策略分為兩種：強(qiáng)緩存和協(xié)商緩存
基本原理
- 瀏覽器在加載資源時(shí)，根據(jù)請(qǐng)求頭的
Expires和cache-control判斷是否命中強(qiáng)緩存，如果命中則直接從緩存讀取資源，不會(huì)向服務(wù)器發(fā)起請(qǐng)求。 - 如果強(qiáng)緩存沒有命中，瀏覽器一定會(huì)向服務(wù)器發(fā)起請(qǐng)求，通過
last-modefied和Etag去判斷資源是否命中協(xié)商緩存，如果命中代表資源沒有更新，服務(wù)器會(huì)返回304，讀取緩存中的資源，如果沒有命中，則代表資源有更新，服務(wù)器會(huì)返回200，從服務(wù)器加載資源。
強(qiáng)緩存和協(xié)商緩存的異同
- 同： 如果兩種緩存方式都未命中，則都需要從服務(wù)端加載資源
- 異：強(qiáng)緩存命中不會(huì)向服務(wù)器發(fā)起請(qǐng)求，協(xié)商緩存需要向服務(wù)器發(fā)起請(qǐng)求
強(qiáng)緩存
強(qiáng)緩存通過
Expires和Cache-Control兩種響應(yīng)頭實(shí)現(xiàn)。
1. Expires
Expires: Wed, 22 Oct 2018 08:41:00 GMT
Expires 出現(xiàn)于 HTTP / 1.0 ，表示資源會(huì)在 Wed, 22 Oct 2018 08:41:00 GMT 后過期，需要再次請(qǐng)求。并且受限于本地時(shí)間，如果修改了本地事件，如果修改了本地時(shí)間，可能造成緩存失效。
2. Cache-Control
Cache-Control 出現(xiàn)于 HTTP / 1.1，優(yōu)先級(jí)高于 Expires ,表示的是相對(duì)時(shí)間。
Cache-Control: max-age=315360000
協(xié)商緩存
協(xié)商緩存是利用的是【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】來管理的。
1. Last-Modefied & If-Modified-Since
Last-Modefied代表服務(wù)器端文件的最后修改時(shí)間，當(dāng)瀏覽器發(fā)起請(qǐng)求時(shí)，會(huì)向服務(wù)端發(fā)送If-modefied-Since報(bào)頭，詢問在Last-Modefied之后有沒有被修改過。如果沒有修改過，則返回304使用緩存，如果修改過，則向服務(wù)器請(qǐng)求資源，返回200。
但是如果本地打開緩存文件，會(huì)導(dǎo)致Last-Modefied被修改，所以在 HTTP/1.1中引入 Etag.
2. Etag & & If-None-Match
Etag是服務(wù)器自動(dòng)生成或者由開發(fā)者生成的對(duì)應(yīng)資源在服務(wù)器端的唯一標(biāo)識(shí)符，能夠更加準(zhǔn)確的控制緩存。當(dāng)發(fā)送請(qǐng)求是If-None-Match會(huì)將上次的Etag發(fā)送給服務(wù)器進(jìn)行判斷是否有更新，如果有更新，則會(huì)請(qǐng)求新的資源。
ETag的優(yōu)先級(jí)比Last-Modified更高
具體為什么要用ETag，主要出于下面幾種情況考慮：
- 一些文件也許會(huì)周期性的更改，但是他的內(nèi)容并不改變(僅僅改變的修改時(shí)間)，這個(gè)時(shí)候我們并不希望客戶端認(rèn)為這個(gè)文件被修改了，而重新GET；
- 某些文件修改非常頻繁，比如在秒以下的時(shí)間內(nèi)進(jìn)行修改，(比方說1s內(nèi)修改了N次)，If-Modified-Since能檢查到的粒度是s級(jí)的，這種修改無法判斷(或者說UNIX記錄MTIME只能精確到秒)；
- 某些服務(wù)器不能精確的得到文件的最后修改時(shí)間。
如何選擇合適的緩存策略
大致的順序
- Cache-Control —— 請(qǐng)求服務(wù)器之前
- Expires —— 請(qǐng)求服務(wù)器之前
- If-None-Match (Etag) —— 請(qǐng)求服務(wù)器
- If-Modified-Since (Last-Modified) —— 請(qǐng)求服務(wù)器
協(xié)商緩存需要配合強(qiáng)緩存使用，如果不啟用強(qiáng)緩存的話，協(xié)商緩存根本沒有意義
大部分web服務(wù)器都默認(rèn)開啟協(xié)商緩存，而且是同時(shí)啟用【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】
