瀏覽器緩存，也就是客戶端緩存,既是網頁性能優化裡面靜態資源相關優化的一大利器，也是無數web開發人員在工作過程不可避免的一大問題。瀏覽器緩存分為：強緩存和協商緩存 （1）原理： 1.瀏覽器載入資源時，先根據這個資源的http header中的Cache-Control判斷是否命中強緩存，如果命中，瀏 ...
瀏覽器緩存，也就是客戶端緩存,既是網頁性能優化裡面靜態資源相關優化的一大利器，也是無數web開發人員在工作過程不可避免的一大問題。瀏覽器緩存分為：強緩存和協商緩存 （1）原理： 1.瀏覽器載入資源時，先根據這個資源的http header中的Cache-Control判斷是否命中強緩存，如果命中，瀏覽器直接從緩存中讀取資源，根本不會向伺服器發送請求； 2.當強緩存沒有命中的時候，瀏覽器則會發送一個請求到伺服器，通過資源的http header中的 Last-Modified 和If-Modified-Since來判斷資源是否命中協商緩存，如果命中，伺服器將會將這個請求返回，但不會返回這個資源的數據，而是告訴客服端可以從緩存中載入這個資源； 3.如果資源也沒有命中協商緩存的話，瀏覽器直接從伺服器端載入資源數據 （2）共同點與區別： 1.共同點：如果命中，都從客戶端緩存中載入這個資源，而不從伺服器端載入； 2.區別： 強緩存不發請求到伺服器，協商緩存發請求到伺服器； （3）強緩存原理 命中強緩存，chrome里的network裡面 status是200，且size會顯示為from disk/memory cache,Cache Control :max-age:315360000 單位秒，也就是10年 1.瀏覽器第一次跟伺服器請求一個資源，伺服器在返回這個資源的同時，在respone的header加上Cache-Control的header 2.瀏覽器接收到這個資源後，會把這個資源連同所有的resoponse Header緩存下來 3.瀏覽器再次請求這個資源時，會從緩存中尋找，找到後，根據它第一次請求時間和Cache Control設定的有效期，計算一個過期時間。再拿這個過期時間跟當前請求時間比較，如果當前請求時間在過期時間之前，就能命中緩存。否則，就不行。 （4）協商緩存原理 如果協商緩存命中，請求響應返回的http狀態為304並且會顯示一個Not Modified的字元串。協商緩存是利用的是【Last-Modified，If-Modified-Since】 1.瀏覽器第一次跟伺服器請求一個資源，伺服器在返回這個資源的同時，在respone的header加上Last-Modified的header，這個header表示這個資源在伺服器上的最後修改時間； 2.瀏覽器再次跟伺服器請求這個資源時，在request的header上加上If-Modified-Since的header，這個header的值就是上一次請求時返回的Last-Modified的值； 3.伺服器再次收到資源請求時，根據瀏覽器傳過來If-Modified-Since和資源在伺服器上的Last-Modified是否有變化，如果沒有變化則返回304 Not Modified，但是不會返回資源內容；如果有變化，就正常返回資源內容。 （5）清除客戶端緩存的方法 1.當ctrl+f5強制刷新網頁時，直接從伺服器載入，跳過強緩存和協商緩存； 2.當f5刷新網頁時，跳過強緩存，但是會檢查協商緩存； 3.如果用的是chrome，可以f12在network那裡把緩存給禁掉 Disable cache 4. 給資源加上一個動態的參數，css/index.css?v=2017032901
