資訊專欄INFORMATION COLUMN
摘要：協商緩存當瀏覽器判斷不是強緩存，就會發向服務器發請求，判斷是否是協商緩存。如果是，服務器會返回，瀏覽器從緩存中加載。若這兩個字段相同，則代表資源沒有變化，服務器返回，瀏覽器從緩存中加載。
加快頁面打開速度
減輕服務器壓力
減少網絡損耗
mate標簽控制
1、content-type(文檔內容類型：用于設定文檔的類型和字符集)
2、expires(期限：可以用于設定網頁的到期期限)
3、pragma（cashe模式：即是否從緩存中訪問網頁內容）
4、refresh(刷新：等待一定時間自動刷新或跳轉到其他url)
// 文檔類型 // 必須是 GMT 格式 // 是否設置緩存 // 等待一定時間自動跳轉
接下來說點有用的，瀏覽器會通過Response header信息，來確認是否緩存，怎么緩存。
強緩存
協商緩存
先說強緩存：
在控制臺資源加載 size欄我們會看到架子啊資源的大小，如果是緩存直接在本地讀取 （from memory cache 來自內存緩存）（from disk cache 來自磁盤緩存）
瀏覽器加載資源時先判斷頭信息是否包含Cache-Control和Expires這兩個屬性，Expires是http1.0，Cache-Control是http1.1,從版本上來說肯定是Cache-control更強一些，畢竟不能越升級越low，約定也是兩個同時存在Cache-control優先級更高。
截圖為js的Response header信息，包含Cache-control和Expires，但從字面上我們能看出Expires設置了一個時間，我們猜它應該是過期時間，擦居然猜對了。我們再猜一下Cache-control：一坨字段，max-age=31536000，我猜也是過期時間，哈哈又猜對了，不逗比了挨個說說
Expires：設置瀏覽器緩存時間，時間是絕對時間，從設置的值上可以看出是個日期，瀏覽器收到Response時看看有沒有Expires字段有的話緩存頭信息和資源，再次請求時查看緩存時間過沒過，沒過在緩存拿出來，過了重新請求。
Cache-control：這個承載值就多了
max-age=xxx：緩存的內容將在 xxx 秒后失效，這個時間是個時間間隔相對時間。
public：所有內容都將被緩存（客戶端和代理服務器都可緩存）
private：內容只緩存到私有緩存中（僅客戶端可以緩存，代理服務器不可緩存）
no-cache：必須先與服務器確認返回的響應是否被更改，然后才能使用該響應來滿足后續對同一個網址的請求。因此，如果存在合適的驗證令牌（ETag），no-cache 會發起往返通信來驗證緩存的響應，如果資源未被更改，可以避免下載
no-store：所有內容都不會被緩存或 Internet 臨時文件中
must-revalidation/proxy-revalidation：如果緩存的內容失效，請求必須發送到服務器/代理以進行重新驗證
服務端通過If-Modified-Since（Last-Modified）和If-None-Match（Etag）這兩個屬性的值來判斷緩存是否失效的。
2、協商緩存：當瀏覽器判斷不是強緩存，就會發向服務器發請求，判斷是否是協商緩存。如果是，服務器會返回304Not Modified，瀏覽器從緩存中加載。那什么又是協商緩存呢？
Last-Modified和If-Modified-Since字段：
1、瀏覽器第一次向服務器發請求，服務器返回資源并在response header加上Last-Modified字段，表示資源最后修改的時間。
2、瀏覽器再次請求這個資源時，請求頭會加上If-Modified-Since字段。若這兩個字段一樣，說明資源沒有修改過，返回304Not Modified，瀏覽器從緩存中獲取資源。若這兩個字段不一樣，說明資源修改過，服務器正常返回資源。
ETag、If-None-Match：
但有時候服務器上資源有變化，單最后修改時間沒更新，則引出下面兩個字段。
1、瀏覽器第一次向服務器請求，服務器返回資源并在response header上加ETag字段。表示資源本身，資源有變化，則該字段有變化。
2、瀏覽器再次向服務器請求這個資源時，請求頭攜帶If-None-Match字段。若這兩個字段相同，則代表資源沒有變化，服務器返回304Not Modified，瀏覽器從緩存中加載。若兩個字段不同，證明資源有變動，服務器正常返回資源。
參考：
https://juejin.im/post/5a7a8e...
https://juejin.im/post/59c602...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100511.html
摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...
摘要：前端是應用服務器處理之前的部分，前端主要包括等各種資源，針對不同的資源有不同的優化方式。常見方法合并多個文件和文件，利用整合圖像，使用在實際的頁面嵌入圖像數據，合理設置緩存等。 web前端是應用服務器處理之前的部分，前端主要包括：HTML,CSS,javascript,image等各種資源，針對不同的資源有不同的優化方式。 內容優化 (1)減少HTTP請求數:這條策略是最重要最有效...
摘要：是具有此屬性的域名不需要用戶點擊鏈接就在后臺解析，而域名解析和內容載入是串行的網絡操作，所以這個方式能減少用戶的等待時間，提升用戶體驗。 web前端性能優化主要分為以下幾個板塊: 加載優化 DNS預解析 合并img、css、javascript文件，減少http請求 緩存一切可緩存資源 使用長Cache 使用外聯式引用css、javascript文件 壓縮HTML、css、jav...
摘要：是具有此屬性的域名不需要用戶點擊鏈接就在后臺解析，而域名解析和內容載入是串行的網絡操作，所以這個方式能減少用戶的等待時間，提升用戶體驗。 web前端性能優化主要分為以下幾個板塊: 加載優化 DNS預解析 合并img、css、javascript文件，減少http請求 緩存一切可緩存資源 使用長Cache 使用外聯式引用css、javascript文件 壓縮HTML、css、jav...
閱讀 3528·2021-09-22 15:50
閱讀 3233·2019-08-30 15:54
閱讀 2748·2019-08-30 14:12
閱讀 3058·2019-08-30 11:22
閱讀 2079·2019-08-29 11:16
閱讀 3574·2019-08-26 13:43
閱讀 1192·2019-08-23 18:33
閱讀 920·2019-08-23 18:32
