資訊專欄INFORMATION COLUMN
摘要：概念瀏覽器緩存是前端開發中經常遇到的問題，它是提升性能同時減少服務器壓力的有效手段之一。服務器通過指定，告知代理服務器，需要緩存兩個版本壓縮和未壓縮。異常表現上述緩存有關的規律，并非所有瀏覽器都遵循，比如說。
概念
瀏覽器緩存是前端開發中經常遇到的問題，它是提升性能同時減少服務器壓力的有效手段之一。
類型 1.強緩存如果啟用了強緩存，請求資源時不會向服務器發送請求，直接從緩存中讀取資源，在chrome控制臺的network中看到請求返回的200狀態碼，并在狀態碼的后面跟著from disk cache 或者from memory cache關鍵字。
2.協商緩存向服務器請求資源時，服務器會根據這個請求的request header一些參數來判斷是否符合協商緩存類型，如果符合在返回304狀態碼并帶上新的response header通知瀏覽器從緩存中讀取資源。
對比：
緩存相關的header 1.強緩存兩者的共同點是都從客戶端讀取資源，不同的是強緩存不會向服務器發送請求，協商緩存會發請求。
expires
response header里的過期時間，瀏覽器再次加載資源時，如果在這個時間內，則會使用強緩存；
cache control
當值設為max-age = 300時，則代表在這個請求正確返回時間的5分鐘內再次加載資源，就會啟用強緩存。這個參數的設置和Expires作用是差不多的，只不過Expire是http1.0就有的，Cache-Control是http1.1才有的，相對于配置expires的方式，Cache-Control的優先級更高。現在配置Expires是為了兼容不能支持http1.1的環境。
Etag和If-None-Match
Etag是上一次加載資源時，服務器返回的對該資源的唯一標識，只要資源有變化，Etag就會重新生成。瀏覽器在下一次加載資源向服務器發送請求時，會將上一次返回的Etag值放到request header里的If-None-Match里，服務器接受到If-None-Match的值后，會拿來跟該資源文件的Etag值做比較，如果相同，則表示資源文件沒有發生改變，命中協商緩存。
Last-Modified和If-Since-Modified
Last-Modified是該資源文件最后一次更改時間，服務器會在response header里返回，同時瀏覽器會將這個值保存起來，在下一次發送請求時，放到request header里的If-Modified-Since里，服務器在接收到后也會做比對，如果相同則命中協商緩存。
用戶行為多瀏覽器緩存的控制ETag和Last-Modified的作用和用法差不多。對比下他們的不同。
1.首先在精度上，ETag要優于Last-Modified。Last-Modifed的時間單位是秒，如果某個文件在1秒內修改了很多次，那么他們的Last-Modified其實沒有體現出來修改，但是ETag每次都會改變確保了精度，如果是負載均衡的服務器，各個服務器生成的Last-Modified也可能不一致。
2.其次在性能上，ETag要遜于Last-Mdified，畢竟Last-Modified只需要記錄時間，而Etag需要通過算法計算出來一個hash值。
3.最后在優先級上，服務器經驗優先考慮ETag。
地址欄訪問，鏈接跳轉是正常用戶行為，將會觸發瀏覽器緩存機制；
F5刷新，瀏覽器會設置max-age = 0，跳過強緩判斷，會進行協商緩存判斷；
ctrl+F5，跳過強緩存和協商緩存判斷，直接從服務器拉取資源。
幾個常見的response header字段的解釋age
出現此字段，表示命中代理服務器的緩存，它的值指的是代理服務器對于請求資源的已緩存時間，單位為妙。
date
指的是相應生成的時間，請求經過代理服務器時，返回的Date未必是最新的，所以通常這個時候，代理服務器增加一個Age字段告知該資源已緩存了多久。
Vary
對于服務器而言，資源文件可能有壓縮和未壓縮版本，針對不同的客戶端，返回不同的資源版本。有些老式瀏覽器不支持解壓縮，這時候需要返回未壓縮版本；對于新瀏覽器，支持壓縮的，返回壓縮版本，節省帶寬，提升體驗。這時候用Vary來區分這個資源版本。服務器通過指定Vary：Accept-Encoding，告知代理服務器，需要緩存兩個版本：壓縮和未壓縮。
有時候，很多工作場景需要避免瀏覽器緩存，除了瀏覽器瀏覽器隱身模式，請求時要禁用緩存：
設置請求頭：Cache-control：no-cache，no-store，must-revalidate；
給資源加一個版本號，這樣你就可以自由控制什么時候加載最新的資源:
HTML禁用緩存，在頁面上寫:
但是最后一種方法只有部分瀏覽器支持，由于代理服務器不解析HTML文檔，所以也不支持這種方式。
IE8異常表現上述緩存有關的規律，并非所有瀏覽器都遵循，比如說IE8。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/61902.html
摘要：淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時，主要是通過進行通信。 最近項目慢慢走上正軌，需求趨于平穩，這才想起需要對整站進行性能優化。經過一段時間的學習，結合現在項目的實際性能情況，發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...
摘要：淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時，主要是通過進行通信。 最近項目慢慢走上正軌，需求趨于平穩，這才想起需要對整站進行性能優化。經過一段時間的學習，結合現在項目的實際性能情況，發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...
摘要：協商緩存用戶發送的請求，發送到服務器后，由服務器判定是否從緩存中獲取資源。如果想主動清除緩存，也可以在請求頭信息中加入來禁止緩存。主要取值如下緩存的時效由決定。是的字段，而是的字段，當與同時存在時，的優先級要高于。 在講這幾個屬性之前，先復習下瀏覽器的緩存機制，再結合了解一下Last-Modified / If-Modified-Since、Etag / If-Match、cache-...
閱讀 2556·2021-09-22 15:25
閱讀 2963·2021-09-14 18:03
閱讀 1212·2021-09-09 09:33
閱讀 1700·2021-09-07 09:59
閱讀 2930·2021-07-29 13:50
閱讀 1500·2019-08-30 15:44
閱讀 1715·2019-08-29 16:22
閱讀 1287·2019-08-29 12:49
