200 from memory cache 不訪問服務器，直接讀緩存，從內存中讀取緩存。此時的數據時緩存到內存中的，當kill進程后，也就是瀏覽器關閉以后，數據將不存在。但是這種方式只能緩存派生資源

200 from disk cache 不訪問服務器，直接讀緩存，從磁盤中讀取緩存，當kill進程時，數據還是存在。這種方式也只能緩存派生資源

304 Not Modified 訪問服務器，發現數據沒有更新，服務器返回此狀態碼。然后從緩存中讀取數據。

三級緩存原理

先去內存看，如果有，直接加載

如果內存沒有，擇取硬盤獲取，如果有直接加載

如果硬盤也沒有，那么就進行網絡請求

加載到的資源緩存到硬盤和內存

一般瀏覽圖片，如下流程：

訪問- 200 - 退出瀏覽器

再進來- 200(from disk cache) - 刷新 - 200(from memory cache)

application cache和上面緩存有點區別，是離線緩存，就是資源可以從硬盤上讀取而不用聯網，即使斷網，用戶也可以瀏覽。

設置瀏覽器緩存

304是協商緩存還是要和服務器通信一次，要想斷絕服務器通信，就要強制瀏覽器使用本地緩存（cache-control/expires），

一般有如下幾種方式設置瀏覽器緩存。

1、通過HTTP的META設置expires和cache-control

 meta http-equiv= Cache-Control content= max-age=7200 /  meta http-equiv= Expires content= Sun Oct 15 2017 20:39:53 GMT+0800 (CST) / 

這樣寫的話僅對該網頁有效，對網頁中的圖片或其他請求無效。

2、apache服務器配置圖片，css，js，flash的緩存

這個主要通過服務器的配置來實現這個技術，如果使用apache服務器的話，可以使用mod_expires模塊來實現：

編譯mod_expires模塊：

Cd /root/httpd-2.2.3/modules/metadata/usr/local/apache/bin/apxs -i -a -c mod_expires.c //編譯

先打開httpd.conf文件，然后查找expires這個模塊，找到后，刪除左邊的#號，表示打這個模塊，并重啟apache服務器

編輯httpd.conf配置：添加下面內容

 IfModule mod_expires.c ExpiresActive onExpiresDefault access plus 1 month ExpiresByType text/html access plus 1 months ExpiresByType text/css access plus 1 months ExpiresByType image/gif access plus 1 months ExpiresByType image/jpeg access plus 1 months ExpiresByType image/jpg access plus 1 months ExpiresByType image/png access plus 1 months EXpiresByType application/x-shockwave-flash access plus 1 months EXpiresByType application/x-javascript access plus 1 months #ExpiresByType video/x-flv access plus 1 months /IfModule 

3、php等設置

 ?php header( Cache-Control: public  header( Pragma: cache  $offset = 30*60*60*24; // cache 1 month $ExpStr = Expires: .gmdate( D, d M Y H:i:s , time() + $offset). GMT  header($ExpStr);? 

或者

$seconds_to_cache = 3600;$ts = gmdate( D, d M Y H:i:s , time() + $seconds_to_cache) . GMT header( Expires: $ts header( Pragma: cache header( Cache-Control: max-age=$seconds_to_cache 

緩存情況下前端代碼部署

問題一：有了緩存，如何進行前端代碼更新呢？

我們可以在資源文件或者圖片后面添加版本號，如下圖。

問題二：但是所有文件都加了版本號之后，我們只更改了一個文件，其他文件的緩存不是浪費了嗎？

解決這個問題，我們可以用 數據摘要要算法，對文件求摘要信息，摘要信息與文件內容一一對應。如下圖：

這樣就解決了這個問題。

問題三：新的問題又來了，文件發布怎么辦？

1、先部署頁面，再部署資源：在二者部署的時間間隔內，如果有用戶訪問頁面，就會在新的頁面結構中加載舊的資源，并且把這個舊版本的資源當做新版本緩存起來，其結果就是：用戶訪問到了一個樣式錯亂的頁面，除非手動刷新，否則在資源緩存過期之前，頁面會一直執行錯誤。

2、先部署資源，再部署頁面：在部署時間間隔之內，有舊版本資源本地緩存的用戶訪問網站，由于請求的頁面是舊版本的，資源引用沒有改變，瀏覽器將直接使用本地緩存，這種情況下頁面展現正常；但沒有本地緩存或者緩存過期的用戶訪問網站，就會出現舊版本頁面加載新版本資源的情況，導致頁面執行錯誤，但當頁面完成部署，這部分用戶再次訪問頁面又會恢復正常了。

好的，上面一坨分析想說的就是：先部署誰都不成！都會導致部署過程中發生頁面錯亂的問題。所以，訪問量不大的項目，可以讓研發同學苦逼一把，等到半夜偷偷上線，先上靜態資源，再部署頁面，看起來問題少一些。

如何解決這些問題呢？

這個問題，起源于資源的 覆蓋式發布，用 待發布資源 覆蓋 已發布資源，就有這種問題。解決它也好辦，就是實現 非覆蓋式發布

關于緩存的方方面面就這么多了，更多精彩請關注php 其它相關文章！

相關閱讀：

HTML怎么實現數字焦點圖輪播代碼

HTML里的最后一行文字顯示不全怎么處理

怎樣用canvas做出粒子噴泉動畫的效果

以上就是前端瀏覽器緩存怎么使用的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。