資訊專欄INFORMATION COLUMN
摘要：瀏覽器讀取資源的流程瀏覽器在加載資源時，根據(jù)請求頭的和判斷是否命中強緩存，是則直接從緩存讀取資源，不會發(fā)請求到服務(wù)器。實際上是會被緩存的，只不過每次在向客戶端瀏覽器提供響應(yīng)數(shù)據(jù)時，緩存都要向服務(wù)器評估緩存響應(yīng)的有效性。
瀏覽器讀取資源的流程
瀏覽器在加載資源時，根據(jù)請求頭的expires和cache-control判斷是否命中強緩存，是則直接從緩存讀取資源，不會發(fā)請求到服務(wù)器。
如果沒有命中強緩存，瀏覽器一定會發(fā)送一個請求到服務(wù)器，通過last-modified或者etag驗證資源是否命中協(xié)商緩存，如果命中，服務(wù)器會將這個請求返回，但是不會返回這個資源的數(shù)據(jù)，依然是從緩存中讀取資源
如果前面兩者都沒有命中，直接從服務(wù)器加載資源
強制緩存（不發(fā)送請求）
如何設(shè)置
通常我們會同時設(shè)置expires和cache-control兩種，保證無論在http1還是1.1的情況下都有效
expires
過期時間，如果設(shè)置了時間，則瀏覽器會在設(shè)置的時間內(nèi)直接讀取緩存，不再請求
cache-control
http1.1新標準，包括這些屬性：
（1）max-age：用來設(shè)置資源（representations）可以被緩存多長時間，單位為秒； （2）s-maxage：和max-age是一樣的，不過它只針對代理服務(wù)器緩存而言； （3）public：指示響應(yīng)可被任何緩存區(qū)緩存； （4）private：只能針對個人用戶，而不能被代理服務(wù)器緩存； （5）no-cache：強制客戶端直接向服務(wù)器發(fā)送請求,也就是說每次請求都必須向服務(wù)器發(fā)送。服務(wù)器接收到請求，然后判斷資源是否變更，是則返回新內(nèi)容，否則返回304，未變更。這個很容易讓人產(chǎn)生誤解，使人誤以為是響應(yīng)不被緩存。實際上Cache-Control:no-cache是會被緩存的，只不過每次在向客戶端（瀏覽器）提供響應(yīng)數(shù)據(jù)時，緩存都要向服務(wù)器評估緩存響應(yīng)的有效性。 （6）no-store：禁止一切緩存（這個才是響應(yīng)不被緩存的意思）。
緩存的兩種表現(xiàn)形式
memory cache
來自于內(nèi)存的數(shù)據(jù)，會隨著進程的結(jié)束而清除，讀取速度相對快(0ms)
一般存放腳本，圖片，字體等文件
disk cache
來自于硬盤的數(shù)據(jù)，不會隨著進程的結(jié)束而清除，讀取速度慢于memory cache(2-10ms 硬盤讀寫的IO操作)
一般存放css文件
根據(jù)經(jīng)驗情況來看：瀏覽器的實際處理邏輯是這樣的
首次加載資源 -> 200 -> 關(guān)閉標簽頁
再次進入 -> 200 from disk cache -> 刷新 -> 200 from memory cache
（不過好像css都是from disk cache, base64都是from memory cache）
客戶端向服務(wù)端發(fā)送請求時候（沒有命中強制緩存），服務(wù)端會檢查是否有對應(yīng)的標識，沒有則返回200并生成一個新的標識帶到header，下次在請求的時候服務(wù)端檢查到對應(yīng)的這個標識并做相應(yīng)的校驗，通過則返回304，讀取緩存。
Last-modify / If-modify-since
瀏覽器首次請求資源的時候，服務(wù)器會返回一個last-Modify到header中. Last-Modify 含義是最后的修改時間。
當瀏覽器再次請求的時候，request header會帶上 if-Modify-Since，該值為之前返回的 Last-Modify。服務(wù)器收到if-Modify-Since后，根據(jù)資源的最后修改時間(last-Modify)和該值(if-Modify-Since)進行比較，如果相等的話，則命中緩存，返回304，否則, 則會給出200響應(yīng)，并且更新Last-Modify為新的值
Etag / If-none-match（http1.1規(guī)范）
ETag的原理和上面的last-modified是類似的。ETag對當前請求的資源做一個唯一的標識。該標識可以是一個字符串，文件的size,hash等。只要能夠合理標識資源的唯一性并能驗證是否修改過就可以了。ETag在服務(wù)器響應(yīng)請求的時候，返回當前資源的唯一標識(它是由服務(wù)器生成的)。但是只要資源有變化，ETag會重新生成的。瀏覽器再下一次加載的時候會向服務(wù)器發(fā)送請求，會將上一次返回的ETag值放到request header 里的 if-None-Match里面去，服務(wù)器端只要比較客戶端傳來的if-None-Match值是否和自己服務(wù)器上的ETag是否一致，如果一致說明資源未修改過，因此返回304，如果不一致，說明修改過，因此返回200。并且把新的Etag賦值給if-None-Match來更新該值。
在精度上，ETag要優(yōu)先于 last-modified。
last-modified這種方式精度差在哪里：
a. 一些文件也許會周期性的更改，但是他的內(nèi)容并不改變(僅僅改變的修改時間)，這個時候我們并不希望客戶端認為這個文件被修改了
b. 某些文件修改非常頻繁，比如在秒以下的時間內(nèi)進行修改，(比方說1s內(nèi)修改了N次)，If-Modified-Since能檢查到的粒度是s級的，這種修改無法判斷(或者說UNIX記錄MTIME只能精確到秒)；
在性能上，Etag要遜于Last-Modified，Last-Modified需要記錄時間，而Etag需要服務(wù)器通過算法來計算出一個hash值。
在優(yōu)先級上，服務(wù)器校驗優(yōu)先考慮Etag。
如何設(shè)置index.html不被緩存文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/104306.html
摘要：對于前端性能優(yōu)化我們不得不了解的幾個知識點信息今天我就來談?wù)勎覍Φ睦斫馐鞘裁慈Q是即內(nèi)容分發(fā)網(wǎng)絡(luò)。將網(wǎng)站內(nèi)容發(fā)布到接近用戶的服務(wù)器上。用戶訪問網(wǎng)站時，用戶訪問就近服務(wù)器，然后加載這些資源。 對于前端性能優(yōu)化我們不得不了解的幾個知識點：CDN、HTTP header信息 今天我就來談?wù)勎覍dn的理解 1、CDN是什么：CDN全稱是Content Delivery Network,即內(nèi)容...
摘要：對于前端性能優(yōu)化我們不得不了解的幾個知識點信息今天我就來談?wù)勎覍Φ睦斫馐鞘裁慈Q是即內(nèi)容分發(fā)網(wǎng)絡(luò)。將網(wǎng)站內(nèi)容發(fā)布到接近用戶的服務(wù)器上。用戶訪問網(wǎng)站時，用戶訪問就近服務(wù)器，然后加載這些資源。 對于前端性能優(yōu)化我們不得不了解的幾個知識點：CDN、HTTP header信息 今天我就來談?wù)勎覍dn的理解 1、CDN是什么：CDN全稱是Content Delivery Network,即內(nèi)容...
摘要：對于前端性能優(yōu)化我們不得不了解的幾個知識點信息今天我就來談?wù)勎覍Φ睦斫馐鞘裁慈Q是即內(nèi)容分發(fā)網(wǎng)絡(luò)。將網(wǎng)站內(nèi)容發(fā)布到接近用戶的服務(wù)器上。用戶訪問網(wǎng)站時，用戶訪問就近服務(wù)器，然后加載這些資源。 對于前端性能優(yōu)化我們不得不了解的幾個知識點：CDN、HTTP header信息 今天我就來談?wù)勎覍dn的理解 1、CDN是什么：CDN全稱是Content Delivery Network,即內(nèi)容...
閱讀 3041·2021-11-25 09:43
閱讀 3678·2021-11-24 11:13
閱讀 3438·2021-10-14 09:42
閱讀 2656·2021-09-23 11:53
閱讀 3680·2021-09-22 15:57
閱讀 3291·2021-09-02 09:54
閱讀 3561·2019-08-30 13:47
閱讀 1696·2019-08-29 16:55
