資訊專欄INFORMATION COLUMN
摘要：其關(guān)鍵路徑如下圖所示圖緩存關(guān)鍵路徑三關(guān)鍵路徑之驗(yàn)證緩存瀏覽器發(fā)起一個請求，生成報(bào)文，先發(fā)送到緩存器，緩存器驗(yàn)證是否有本地緩存，緩存是否過期等，即圖的第一條路徑，稱之為驗(yàn)證緩存。
一、證件照場景
拍一次證件照麻煩且費(fèi)錢，因此每次拍的時(shí)候我們都會多留幾張備用。這就是計(jì)算機(jī)世界的緩存，在現(xiàn)實(shí)世界中的寫照。
如果某個行為很消耗資源，很麻煩，那在實(shí)現(xiàn)它的時(shí)候就順便多保留幾份，這種行為就是緩存。特點(diǎn)很明顯
容量有限，我們不可能留一屋子的備用照片
有時(shí)效性，小時(shí)候的證件照長大了不能用吧
二、HTTP 緩存緩存是一個比較籠統(tǒng)的概念，幾乎任何行為都可以將結(jié)果緩存起來，尤其那些模塊與模塊的連接處，例如計(jì)算機(jī)世界的數(shù)據(jù)庫查詢，網(wǎng)絡(luò)I/O等等，而人類世界諸如找人事部開收入證明、去婚姻登記處開未婚證明等等基本上會多開兩三份。
本文討論的是 HTTP 協(xié)議層面的緩存，它規(guī)范了瀏覽器和服務(wù)器在發(fā)送和接收到 HTTP 報(bào)文時(shí)，應(yīng)該怎么解析和處理其中的緩存邏輯。其關(guān)鍵路徑如下圖所示
圖 1 HTTP 緩存關(guān)鍵路徑
瀏覽器發(fā)起一個請求，生成 HTTP 報(bào)文，先發(fā)送到緩存器，緩存器驗(yàn)證是否有本地緩存，緩存是否過期等，即圖 1 的第一條路徑，稱之為驗(yàn)證緩存。
這個過程有三種結(jié)果：
不存在緩存
存在緩存，且緩存未過期（由 Cache-control 或 Epire 決定）
存在緩存，但緩存已過期
如果存在緩存，且緩存未過期，則使用緩存響應(yīng)客戶請求，而不會向服務(wù)器發(fā)送請求。其它兩種情況，都會將 HTTP 報(bào)文發(fā)送給服務(wù)器，那么服務(wù)器將怎么處理？
四、關(guān)鍵路徑之服務(wù)器再驗(yàn)證HTTP 報(bào)文經(jīng)過緩存器進(jìn)行驗(yàn)證后，除了使用本地緩存的情況，其他都會向服務(wù)器發(fā)請求，服務(wù)器處理邏輯如下
本地不存在緩存情況，報(bào)文將直接被發(fā)送給服務(wù)器，服務(wù)器響應(yīng)請求，并且在響應(yīng)的報(bào)文中帶上資源的緩存控制信息
如果本地存在緩存，但緩存已過期，那么緩存器將在請求報(bào)文中帶上 if-None-Match（取值對應(yīng)ETag） 和 if-Modified-Since （取值對應(yīng) Last-Modified），服務(wù)器分別對這兩個字段進(jìn)行校驗(yàn)。有更新則返回新的資源文件、新緩存控制信息；沒有更新則返回 304、以及新的緩存控制信息，瀏覽器更新緩存，并響應(yīng)本地緩存文件。
服務(wù)器響應(yīng)的緩存控制信息，包含Cache-Control 和 Expire，以及 ETag 和 Last-Modified，如圖2
圖2 服務(wù)器正常響應(yīng)包含的緩存控制信息
完整的關(guān)鍵路徑，存在以下可能
圖3 緩存關(guān)鍵路徑的幾種情況
瀏覽器第一次訪問某文件，本地?zé)o緩存，服務(wù)器響應(yīng)文件資源，并包含 Cache-Control 和 Expire，瀏覽器緩存器據(jù)此緩存資源。報(bào)文還會包含 ETag 和 Last-Modified
瀏覽器再次請求該文件，如果有緩存，由緩存信息中的 Cache-Control 和 Expire 決定緩存是否過期，沒過期則直接使用緩存；過期則利用ETag 和 Last-Modified 詢問服務(wù)器是否修改過該文件，服務(wù)器驗(yàn)證后，發(fā)現(xiàn)文件修改過則響應(yīng)新的文件和緩存控制信息，緩存器更新緩存并響應(yīng)新文件；若未修改過則返回304和緩存控制信息，緩存器更新緩存控制信息，并響應(yīng)本地緩存文件給瀏覽器
六、問題完整的關(guān)鍵鏈路已經(jīng)說完！比較理想的情況下，有ETag、Last-Modified，有Cache-Control、Expire，但實(shí)現(xiàn)又不總是完美的，關(guān)于緩存還有以下問題需要弄清楚
服務(wù)器沒有響應(yīng) Cache-Control、Expire 會出現(xiàn)什么情況？這種情況下，ETag 和 Last-Modified 還有用嗎？
ETag 和 Last-Modified 功能有些類似，它們的作用有何區(qū)分？Expire 和 Cache-Control max-age 存在同樣的問題。
ETag 是什么？Last-Modified 又是什么？
怎么設(shè)置這些頭部信息？
瀏覽器點(diǎn)擊刷新按鈕，點(diǎn)擊重新加載會出現(xiàn)什么情況？客戶端向服務(wù)器發(fā)送Cache-Control 會出現(xiàn)什么情況
Cache-Control 的取值有很多，各自的意義是什么？
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/61891.html
摘要：上一篇文章梳理緩存的關(guān)鍵路徑。這條路徑的完成，依賴于協(xié)議。首次驗(yàn)證相關(guān)協(xié)議服務(wù)器在響應(yīng)報(bào)文中設(shè)置或，緩存器對資源進(jìn)行緩存。再次請求同一資源時(shí)，緩存器通過檢查和，決定緩存是否過期的過程稱為首次驗(yàn)證。因此，有雙向控制緩存的能力。 上一篇文章 梳理 HTTP 緩存的關(guān)鍵路徑。瀏覽器發(fā)起 HTTP 請求，請求報(bào)文發(fā)往瀏覽器內(nèi)置的緩存器，緩存器經(jīng)過首次驗(yàn)證，再決定是否向服務(wù)器發(fā)起緩存的再次驗(yàn)證。...
摘要：本文主要介紹關(guān)鍵渲染路徑與網(wǎng)絡(luò)兩個方面的性能優(yōu)化并提供，篇幅較長建議電腦觀看。百度統(tǒng)計(jì)代碼注意，的腳本不會被阻塞，完成后立即執(zhí)行，但是有可能會阻塞關(guān)鍵渲染路徑。 本文主要介紹關(guān)鍵渲染路徑與網(wǎng)絡(luò)兩個方面的性能優(yōu)化并提供demo，篇幅較長建議電腦觀看。 前端優(yōu)化的方面太多，本文介紹的僅僅是其中的一部分，力求涵蓋關(guān)鍵渲染路徑的方方面面，及一些不常被提到的網(wǎng)絡(luò)優(yōu)化部分。 測試環(huán)境如無特殊說明均...
摘要：本文主要介紹關(guān)鍵渲染路徑與網(wǎng)絡(luò)兩個方面的性能優(yōu)化并提供，篇幅較長建議電腦觀看。百度統(tǒng)計(jì)代碼注意，的腳本不會被阻塞，完成后立即執(zhí)行，但是有可能會阻塞關(guān)鍵渲染路徑。 本文主要介紹關(guān)鍵渲染路徑與網(wǎng)絡(luò)兩個方面的性能優(yōu)化并提供demo，篇幅較長建議電腦觀看。 前端優(yōu)化的方面太多，本文介紹的僅僅是其中的一部分，力求涵蓋關(guān)鍵渲染路徑的方方面面，及一些不常被提到的網(wǎng)絡(luò)優(yōu)化部分。 測試環(huán)境如無特殊說明均...
摘要：本文主要介紹關(guān)鍵渲染路徑與網(wǎng)絡(luò)兩個方面的性能優(yōu)化并提供，篇幅較長建議電腦觀看。百度統(tǒng)計(jì)代碼注意，的腳本不會被阻塞，完成后立即執(zhí)行，但是有可能會阻塞關(guān)鍵渲染路徑。 本文主要介紹關(guān)鍵渲染路徑與網(wǎng)絡(luò)兩個方面的性能優(yōu)化并提供demo，篇幅較長建議電腦觀看。 前端優(yōu)化的方面太多，本文介紹的僅僅是其中的一部分，力求涵蓋關(guān)鍵渲染路徑的方方面面，及一些不常被提到的網(wǎng)絡(luò)優(yōu)化部分。 測試環(huán)境如無特殊說明均...
閱讀 1160·2021-11-25 09:43
閱讀 2973·2019-08-30 15:54
閱讀 3359·2019-08-30 15:54
閱讀 3005·2019-08-30 15:44
閱讀 1632·2019-08-26 12:18
閱讀 2262·2019-08-26 11:42
閱讀 884·2019-08-26 11:35
閱讀 3302·2019-08-23 18:22
