淺談 瀏覽器快取 前端必備
什麼是快取？
當我們第一次訪問網站的時候，電腦會把網站上的圖片和資料下載到電腦上，當我們再次訪問的時候，網站就會從電腦中直接加載出來，這就是快取。比如我們訪問網頁點選後退功能的時候，載入的非常快，這就是快取的優勢。
快取規則:
來源於伺服器(如:nginx).大部分web伺服器都預設開啟協商快取
快取優點：
1. 快取伺服器壓力，不用每次都去請求某些資料了
2. 提升效能，開啟本地資源肯定會比請求伺服器更快
3. 減少頻寬消耗，當我們使用快取時，只會產生很小的網路消耗。
快取的分類：
1.強快取
2.協商快取
兩者是主次的關係.
瀏覽器快取過程: 首次請求時，瀏覽器根據伺服器的應答respon Header來判斷是否對資源進行快取，，瀏覽器就會把資源快取在memory cache 或 disk cache中。 再次請求時，首先，判斷是否為強快取，是再判斷是否過期，沒有過期就直接返回狀態碼200，從本地快取中拿資料，過期則自動轉為協商快取（強快取過期或者Cache-Control的值為no-cache就是協商快取），接著攜帶欄位訪問伺服器，服務端對比欄位是否變化來判斷資源是否更新符合，沒變化代表沒更新，返回狀態碼304，變化則代表更新了，返回全新資源，瀏覽器在快取，周而復始。
強快取與協商快取的區別：
強快取不發請求到伺服器，所以有時候資源更新了瀏覽器還不知道，但是協商快取會發請求到伺服器，所以資源是否更新，伺服器肯定知道。
完整的快取過程示意圖：
強快取強快取: 如果響應頭中有expires、pragma或cache-control欄位，代表是強快取，當我們首次訪問URL的時候，瀏覽器就會把資源快取在memory cache 或 disk cache中，再次訪問時，不會向伺服器傳送請求，直接從快取中讀取資源，但是會返回200的狀態碼。
區別：
Cache-Control 使用的是相對時間
Expires 指定的是具體的過期時間而不是秒數。
Cache-Control 和 Expires同時使用的話，Cache-Control 會覆蓋Expires
協商快取：強快取過期後或者Cache-Control 的值為 no-cache
當瀏覽器判斷不是強快取，就會向伺服器發請求，判斷是否是協商快取。如果是，伺服器會返回304 Not Modified，瀏覽器從快取中載入。
設定協商快取：
通過Last-Modified和If-Modified-Since欄位
1、瀏覽器第一次向伺服器發請求，伺服器返回資源並在response header加上Last-Modified欄位，表示資源最後修改的時間。
2、瀏覽器再次請求這個資源時，請求頭會加上If-Modified-Since欄位。若這兩個欄位一樣，說明資源沒有修改過，返回304Not Modified，瀏覽器從快取中獲取資源。若這兩個欄位不一樣，說明資源修改過，伺服器正常返回資源。
控制協商快取的欄位： 1. Last-Modified 2. If-Modified-Since和Etag 3. If-None-Match， 注: Etag / If-None-Match的優先順序比Last-Modified / If-Modified-Since高。
協商快取的特殊情況 實際應用也會有伺服器上資源有變化，但最後修改時間沒更新的情況，這個時候就需要用到ETag / If-None-Match了。1、瀏覽器第一次向伺服器請求，伺服器返回資源並在response header上加ETag欄位。表示資源本身，資源有變化，則該欄位有變化。
2、瀏覽器再次向伺服器請求這個資源時，請求頭攜帶If-None-Match欄位。若這兩個欄位相同，則代表資源沒有變化，伺服器返回304Not Modified，瀏覽器從快取中載入。若兩個欄位不同，證明資源有變動，伺服器正常返回資源。
控制協商快取的欄位：
1. Last-Modified
2. If-Modified-Since和Etag
3. If-None-Match， 注: Etag / If-None-Match的優先順序比Last-Modified / If-Modified-Since高。
瀏覽器快取位置快取查詢順序:
Service Worker –> Memory Cache –> Disk Cache –> Push Cache。
瀏覽器快取位置
1 Service Worker
是執行在瀏覽器背後的獨立執行緒，一般可以用來實現快取功能。使用 Service Worker的話，傳輸協議必須為 HTTPS。因為 Service Worker 中涉及到請求攔截，所以必須使用 HTTPS 協議來保障安全。Service Worker 的快取與瀏覽器其他內建的快取機制不同，它可以讓我們自由控制快取哪些檔案、如何匹配快取、如何讀取快取，並且快取是持續性的
2 Memory Cache
記憶體中的快取，主要包含的是當前中頁面中已經抓取到的資源，例如頁面上已經下載的樣式、指令碼、圖片等。讀取記憶體中的資料肯定比磁碟快，記憶體快取雖然讀取高效，可是快取持續性很短，會隨著程序的釋放而釋放。一旦我們關閉 Tab 頁面，記憶體中的快取也就被釋放了。
3 Disk Cache
儲存在硬碟中的快取，讀取速度慢點，但是什麼都能儲存到磁碟中，比之 Memory Cache 勝在容量和儲存時效性上。
在所有瀏覽器快取中，Disk Cache 覆蓋面基本是最大的。它會根據 HTTP Herder 中的欄位判斷哪些資源需要快取，哪些資源可以不請求直接使用，哪些資源已經過期需要重新請求。並且即使在跨站點的情況下，相同地址的資源一旦被硬碟快取下來，就不會再次去請求資料。絕大部分的快取都來自 Disk Cache。
4 Push Cache
Push Cache（推送快取）是 HTTP/2 中的內容，當以上三種快取都沒有命中時，它才會被使用。它只在會話（Session）中存在，一旦會話結束就被釋放，並且快取時間也很短暫，在Chrome瀏覽器中只有5分鐘左右，同時它也並非嚴格執行HTTP頭中的快取指令。
CPU、記憶體、硬碟
CPU、記憶體、硬碟都是計算機的主要組成部分。
CPU：中央處理單元(CntralPocessingUit)的縮寫，也叫處理器，是計算機的運算核心和控制核心。電腦靠CPU來運算、控制。讓電腦的各個部件順利工作，起到協調和控制作用。
硬碟：儲存資料和軟體等資料的裝置，有容量大，斷電資料不丟失的特點。
記憶體：負責硬碟等硬體上的資料與CPU之間資料交換處理。特點是體積小，速度快，有電可存，無電清空，即電腦在開機狀態時記憶體中可儲存資料，關機後將自動清空其中的所有資料
快取存放位置和型別瀏覽器的快取存放在哪裡?
1) from memory cache 代表使用記憶體中的快取. 儲存物件:js 和 css
2) from disk cache。代表使用的是硬碟中的快取. 儲存物件: css
瀏覽器讀取快取的順序為: memory –--> disk
1) 因為memory是放在程序的記憶體當中的, 也就是記憶體儲存,而記憶體儲存有"快速讀取"的優勢, 所以如果程序沒有關閉(瀏覽器標籤頁沒有關閉),從記憶體讀取的更有效率,因此,memory的優先順序比disk高.
讀取快取的場景:
訪問網頁 –> 200 伺服器返回
重新開啟網頁 –> 200(from disk cache) –>
重新整理 –> 200(from memory cache)
1、Cache-Control: Cache-Control: 設定相對過期時間 引數: no-cache: 並不意味著不快取。它的意思是在使用快取資源之前，它必須經過伺服器的檢查 no-store: 才是告訴瀏覽器不要快取它 private(預設): 只能在瀏覽器中快取, 而不能由共享(代理伺服器)快取進行快取 public: 可以被任何快取區快取, 如: 瀏覽器、伺服器、代理伺服器等. max-age: 生存時間,相對過期時間, 即以秒為單位的快取時間. no-cache, private: 開啟新視窗時候重新訪問伺服器, 若設定max-age, 則快取期間不訪問伺服器. - private, 正數的max-age: 後退時候不會訪問伺服器. - no-cache, 正數的max-age: 後退時會訪問伺服器. 2、Expires: Expires 設定以分鐘為單位的絕對過期時間, 優先順序比Cache-Control低, 同時設定Expires和Cache-Control則後者生效. 也就是說要注意一點: Cache-Control的優先順序高於Expires expires起到控制頁面快取的作用，合理配置expires可以減少很多伺服器的請求, expires的配置可以在http段中或者server段中或者location段中. 比如控制圖片等過期時間為30天, 可以配置如下: location ~ \.(gif|jpg|jpeg|png|bmp|ico)$ { root /var/www/img/; expires 30d; } 三、Last-Modified: 該資源的最後修改時間, 在瀏覽器下一次請求資源時, 瀏覽器將先發送一個請求到伺服器上, 並附上If-Unmodified-Since頭來說明瀏覽器裡快取資源的修改時間, 用於伺服器進行對比,判斷是否有修改 需要注意: 1) Last-Modified屬性通常和Expires或Cache-Control屬性配合使用, 因為即使瀏覽器設定快取, 當用戶點選”重新整理”按鈕時, 瀏覽器會忽略快取繼續向伺服器傳送請求, 這時Last-Modified將能夠很好的減小回應開銷. 2) ETag將返回給瀏覽器一個資源ID, 如果有了新版本則正常傳送並附上新ID, 否則返回304， 但是在伺服器叢集情況下, 每個伺服器將返回不同的ID, 因此不建議使用ETag. ngxin配置示例 server { listen 443; #域名 server_name www.dev.163.com; #字符集 charset utf-8; ssl on; ssl_certificate /daka/program/nginx/conf/server.cer; ssl_certificate_key /daka/program/nginx/conf/server.key; ssl_session_timeout 5m; ssl_protocols SSLv2 SSLv3 TLSv1; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; #設定瀏覽器快取 add_header Cache-Control no-cache; add_header Cache-Control private; location /yp { proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://192.168.0.221:8082/yp/yp; if ($request_filename ~* .*.(html|htm)$) { expires -1s; } if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { expires 30d; } if ($request_filename ~ .*.(js|css)$) { expires 12h; } } }