作為一名前端工作人員，前端的快取知識是必須掌握的，因為乙個**開啟網頁的速度直接關係到使用者體驗，使用者粘度，而提高網頁的開啟速度有很多方面需要優化，其中比較重要的一點就是利用好快取，快取檔案可以重複利用，還可以減少頻寬，降低網路負荷。
快取從巨集觀上分為私有快取和共享快取，共享快取就是那些能被各級**快取的快取。私有快取就是使用者專享的，各級**不能快取的快取。快取從微觀上可以分為以下幾類：
這裡主要對瀏覽器的快取進行說明：
from memory cache代表使用記憶體中的快取，from disk cache則代表使用的是硬碟中的快取，瀏覽器讀取快取的順序為memory –> disk。在瀏覽器中，瀏覽器會在js和等檔案解析執行後直接存入記憶體快取中，那麼當重新整理頁面時只需直接從記憶體快取中讀取(from memory cache)；而css檔案則會存入硬碟檔案中，所以每次渲染頁面都需要從硬碟讀取快取(from disk cache)。
expires和cache-control兩者對比：其實這兩者差別不大，區別就在於 expires 是http1.0的產物，cache-control是http1.1的產物，兩者同時存在的話，cache-control優先順序高於expires
協商快取就是強制快取失效後，瀏覽器攜帶快取標識向伺服器發起請求，由伺服器根據快取標識決定是否使用快取的過程瀏覽器在第一次訪問資源時，伺服器返回資源的同時，在response header中新增 last-modified的header，值是這個資源在伺服器上的最後修改時間，瀏覽器接收後快取檔案和header；
瀏覽器下一次請求這個資源，瀏覽器檢測到有 last-modified這個header，於是新增if-modified-since這個header，值就是last-modified中的值；伺服器再次收到這個資源請求，會根據 if-modified-since 中的值與伺服器中這個資源的最後修改時間對比，如果沒有變化，返回304和空的響應體，直接從快取讀取，如果if-modified-since的時間小於伺服器中這個資源的最後修改時間，說明檔案有更新，於是返回新的資源檔案和200
缺點：1、某些服務端不能獲取精確的修改時間 2、檔案修改時間改了，但檔案內容卻沒有變etag是上一次載入資源時，伺服器返回的response header，是對該資源的一種唯一標識，只要資源有變化，etag就會重新生成。瀏覽器在下一次載入資源向伺服器傳送請求時，會將上一次返回的etag值放到request header裡的if-none-match裡，伺服器只需要比較客戶端傳來的if-none-match跟自己伺服器上該資源的etag是否一致，就能很好地判斷資源相對客戶端而言是否被修改過了。如果伺服器發現etag匹配不上，那麼直接以常規get 200回包形式將新的資源（當然也包括了新的etag）發給客戶端；如果etag是一致的，則直接返回304知會客戶端直接使用本地快取即可。
首先在精確度上，etag要優於last-modified，last-modified的時間單位是秒，如果某個檔案在1秒內改變了多次，那麼他們的last-modified其實並沒有體現出來修改，但是etag每次都會改變確保了精度；如果是負載均衡的伺服器，各個伺服器生成的last-modified也有可能不一致。
效能上，etag要遜於last-modified，畢竟last-modified只需要記錄時間，而etag需要伺服器通過演算法來計算出乙個hash值。
優先順序上，伺服器校驗優先考慮etag
不管是瀏覽器快取，還是**伺服器快取，cdn快取都遵循客戶端與服務端之間的快取機制cookie主要是由伺服器生成，且前端也可以設定，儲存在客戶端本地的乙個檔案，通過response響應頭的set-cookie欄位進行設定，且cookie的內容自動在請求的時候被傳遞給伺服器。如下：
cookie包含的資訊：
它可以記錄你的使用者id、密碼、瀏覽過的網頁、停留的時間等資訊。當你再次來到該**時，**通過讀取cookies，得知你的相關資訊，就可以做出相應的動作，如在頁面顯示歡迎你的標語，或者讓你不用輸入id、密碼就直接登入等等。乙個**只能讀取它自己放置的資訊，不能讀取其他**的cookie檔案。因此，cookie檔案還儲存了host屬性，即**的網域名稱或ip。
這些屬性以名值對的方式進行儲存，為了安全，它的內容大多進行了加密處理。cookie檔案的命名格式是：使用者名稱@**位址[數字].txt
cookie的優點：
cookie的缺點：
localstorage主要是前端開發人員，在前端設定，一旦資料儲存在本地後，就可以避免再向伺服器請求資料，因此減少不必要的資料請求，減少資料在瀏覽器和伺服器間不必要地來回傳遞。
可以長期儲存資料，沒有時間限制，一天，一年，兩年甚至更長，資料都可以使用。
localstorage中一般瀏覽器支援的是5m大小，這個在不同的瀏覽器中localstorage會有所不同
優點：
缺點：sessionstorage主要是前端開發人員，在前端設定，sessionstorage（會話儲存），只有在瀏覽器被關閉之前使用，建立另乙個頁面時同意可以使用，關閉瀏覽器之後資料就會消失
儲存上限限制：不同的瀏覽器儲存的上限也不一樣，但大多數瀏覽器把上限限制在5mb以下
web sql 是在瀏覽器上模擬資料庫，可以使用js來操作sql完成對資料的讀寫。它使用 sql 來操縱客戶端資料庫的 api，這些 api 是非同步的，規範中使用的方言是sqllite。資料庫還是在服務端，不建議使用，已廢棄
隨著瀏覽器的功能不斷增強，越來越多的**開始考慮，將大量資料儲存在客戶端，這樣可以減少從伺服器獲取資料，直接從本地獲取資料。
現有的瀏覽器資料儲存方案，都不適合儲存大量資料：cookie 的大小不超過4kb，且每次請求都會傳送回伺服器；localstorage 在 2.5mb 到 10mb 之間（各家瀏覽器不同），而且不提供搜尋功能，不能建立自定義的索引。所以，需要一種新的解決方案，這就是 indexeddb 誕生的背景。
通俗地說，indexeddb 就是瀏覽器提供的本地資料庫，它可以被網頁指令碼建立和操作。indexeddb 允許儲存大量資料，提供查詢介面，還能建立索引。這些都是 localstorage 所不具備的。就資料庫型別而言，indexeddb 不屬於關係型資料庫（不支援 sql 查詢語句），更接近 nosql 資料庫。
關於indexdb的知識可以檢視這篇文章
參考文章：
更多專業前端知識，請上
【猿2048】www.mk2048.com
瀏覽器本地儲存
本地儲存 儲存讀取 刪除在瀏覽器端儲存資料 全域性變數 cookie sessionstorage localstorage 只能短時間儲存資料，頁面跳轉或重新整理後資料會消失 按儲存時間長短分成2種 會話cookie 視窗關閉即消失 持久化cookie 可以由程式設計師指定存活時間，關閉視窗也不會...
瀏覽器本地儲存
瀏覽器的本地儲存主要分為cookie webstorage indexdb，其中webstorage又可以分為localstorage和sessionstorage cookie cookie最開始被設計出來並不是為了做本地儲存。而是彌補http在狀態管理上的不足 http協議是乙個無狀態協議，客戶...
關於瀏覽器本地儲存
通過瀏覽器對資料進行本地儲存 2 設定cookie document.cookie name value 存字串 3 獲取cookie document.cookie 得到所有的儲存資訊，以 隔開，通過字元拆分成陣列split 4 修改已經儲存的資料 重新覆蓋 document.cookie nam...