瀏覽器緩存原理以及本地存儲

做爲一名前端工做人員，前端的緩存知識是必須掌握的，由於一個網站打開網頁的速度直接關係到用戶體驗，用戶粘度，而提升網頁的打開速度有不少方面須要優化，其中比較重要的一點就是利用好緩存，緩存文件能夠重複利用，還能夠減小帶寬，下降網絡負荷。

 

IIS7.COM網站整站下載網站鏡像
一、可多站同時下載、多站同時扒
二、可單頁扒
三、可自定義， 重寫JS\圖片\CSS路徑
四、執行全站下載後，會下載到本程序根目錄下的html文件夾下。
五、全站替換，根據關鍵詞替換。N個（多個）關鍵詞替換。
六、多線程下載
七、自動補齊404不存在的連接頁面（下載大站的時候須要）
八、插入自定義的JS（全站插入）
九、整站下載
十、單頁下載
此程序能夠作到:
1，快速多線程下載整站，不管任何後綴（動態或者靜態）。
2，全站無錯下載，包含CSS\JS\圖片等等。

 

1 緩存

緩存從宏觀上分爲私有緩存和共享緩存，共享緩存就是那些能被各級代理緩存的緩存。私有緩存就是用戶專享的，各級代理不能緩存的緩存。

緩存從微觀上能夠分爲如下幾類：

• 瀏覽器緩存
• 代理服務器緩存
• CDN緩存
• 數據庫緩存
• 應用層緩存

這裏主要對瀏覽器的緩存進行說明：

2 http緩存

2.1 強緩存

• 不會向服務器發送請求，直接從緩存中讀取資源
• 請求返回200的狀態碼
• 在chrome控制檯的network選項中能夠看到size顯示from disk cache或from memory cache。

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

2.2 協商緩存

協商緩存就是強制緩存失效後，瀏覽器攜帶緩存標識向服務器發起請求，由服務器根據緩存標識決定是否使用緩存的過程

• 協商緩存生效，返回304和Not Modified

2.2.1 Last-Modified和If-Modified-Since

瀏覽器在第一次訪問資源時，服務器返回資源的同時，在response header中添加 Last-Modified的header，值是這個資源在服務器上的最後修改時間，瀏覽器接收後緩存文件和header；

瀏覽器下一次請求這個資源，瀏覽器檢測到有 Last-Modified這個header，因而添加If-Modified-Since這個header，值就是Last-Modified中的值；服務器再次收到這個資源請求，會根據 If-Modified-Since 中的值與服務器中這個資源的最後修改時間對比，若是沒有變化，返回304和空的響應體，直接從緩存讀取，若是If-Modified-Since的時間小於服務器中這個資源的最後修改時間，說明文件有更新，因而返回新的資源文件和200

缺點：一、某些服務端不能獲取精確的修改時間 二、文件修改時間改了，但文件內容卻沒有變

2.2.2 ETag和If-None-Match

Etag是上一次加載資源時，服務器返回的response header，是對該資源的一種惟一標識，只要資源有變化，Etag就會從新生成。瀏覽器在下一次加載資源向服務器發送請求時，會將上一次返回的Etag值放到request header裏的If-None-Match裏，服務器只須要比較客戶端傳來的If-None-Match跟本身服務器上該資源的ETag是否一致，就能很好地判斷資源相對客戶端而言是否被修改過了。若是服務器發現ETag匹配不上，那麼直接以常規GET 200回包形式將新的資源（固然也包括了新的ETag）發給客戶端；若是ETag是一致的，則直接返回304知會客戶端直接使用本地緩存便可。

2.2.3 協商緩存兩種方式的對比

1. 首先在精確度上，Etag要優於Last-Modified，Last-Modified的時間單位是秒，若是某個文件在1秒內改變了屢次，那麼他們的Last-Modified其實並無體現出來修改，可是Etag每次都會改變確保了精度；若是是負載均衡的服務器，各個服務器生成的Last-Modified也有可能不一致。
2. 性能上，Etag要遜於Last-Modified，畢竟Last-Modified只須要記錄時間，而Etag須要服務器經過算法來計算出一個hash值。
3. 優先級上，服務器校驗優先考慮Etag

3 緩存機制

appcache優先於強緩存，強制緩存優先於協商緩存進行，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，若不生效則進行協商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協商緩存由服務器決定是否使用緩存，若協商緩存失效，那麼表明該請求的緩存失效，返回200，從新返回資源和緩存標識，再存入瀏覽器緩存中；生效則返回304，繼續使用緩存。具體流程看下圖：

不論是瀏覽器緩存，仍是代理服務器緩存，CDN緩存都遵循客戶端與服務端之間的緩存機制

四、本地存儲

本地存儲主要有如下幾種，localStorage，sessionStorage和cookie，WebSql和IndexDB主要用在前端有大容量存儲需求的頁面上，例如，在線編輯瀏覽器或者網頁郵箱。他們均可以將數據存儲在瀏覽器，應該根據不一樣的場景進行使用。

4.1 Cookie

Cookie主要是由服務器生成，且前端也能夠設置，保存在客戶端本地的一個文件，經過response響應頭的set-Cookie字段進行設置，且Cookie的內容自動在請求的時候被傳遞給服務器。以下：

[HTTP/1.1 200 OK] Server:[bfe/1.0.8.18] Etag:["58860415-98b"] Cache-Control:[private, no-cache, no-store, proxy-revalidate, no-transform] Connection:[Keep-Alive] Set-Cookie:[BDORZ=27315; max-age=86400; domain=.baidu.com; path=/] Pragma:[no-cache] Last-Modified:[Mon, 23 Jan 2017 13:24:37 GMT] Content-Length:[2443] Date:[Mon, 09 Apr 2018 09:59:06 GMT] Content-Type:[text/html]

Cookie包含的信息：
它能夠記錄你的用戶ID、密碼、瀏覽過的網頁、停留的時間等信息。當你再次來到該網站時，網站經過讀取Cookies，得知你的相關信息，就能夠作出相應的動做，如在頁面顯示歡迎你的標語，或者讓你不用輸入ID、密碼就直接登陸等等。一個網站只能讀取它本身放置的信息，不能讀取其餘網站的Cookie文件。所以，Cookie文件還保存了host屬性，即網站的域名或ip。 
這些屬性以名值對的方式進行保存，爲了安全，它的內容大多進行了加密處理。Cookie文件的命名格式是：用戶名@網站地址[數字].txt

服務器遠程桌面鏈接
本工具能夠作到：
一、批量管理WIN系列服務器、VPS。
二、批量導入服務器VPS的IP，端口，帳號和密碼
三、批量打開N個服務器VPS的遠程桌面
四、遠程桌面後，遠程窗口右上角會出現 服務器備註的信息，如鄭州xxx號服務器
五、遠程桌面後，不影響任務欄顯示。能夠及時看其餘窗口。
六、自定義遠程桌面窗口分辨率
七、定時監測服務器是否正常
八、提醒快服務器到期

Cookie的優勢：

• 給用戶更人性化的使用體驗，如記住「密碼功能」、老用戶登陸歡迎語
• 彌補了HTTP無鏈接特性
• 站點統計訪問人數的一個依據

Cookie的缺點：

• 它沒法解決多人共用一臺電腦的問題，帶來了不安全因素
• Cookie文件容易被誤刪除
• 一人使用多臺電腦
• Cookies欺騙。修改host文件，能夠非法訪問目標站點的Cookie
• 容量有限制，不能超過4kb
• 在請求頭上帶着數據安全性差

4.2 localStorage

localStorage主要是前端開發人員，在前端設置，一旦數據保存在本地後，就能夠避免再向服務器請求數據，所以減小沒必要要的數據請求，減小數據在瀏覽器和服務器間沒必要要地來回傳遞。

能夠長期存儲數據，沒有時間限制，一天，一年，兩年甚至更長，數據均可以使用。 
localStorage中通常瀏覽器支持的是5M大小，這個在不一樣的瀏覽器中localStorage會有所不一樣

優勢：

• localStorage拓展了cookie的4k限制
• localStorage能夠將第一次請求的5M大小數據直接存儲到本地，相比於cookie能夠節約帶寬
• localStorage的使用也是遵循同源策略的，因此不一樣的網站直接是不能共用相同的localStorage

缺點：

• 須要手動刪除，不然長期存在
• 瀏覽器大小不一，版本的支持也不同
• localStorage只支持string類型的存儲，JSON對象須要轉換
• localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡

4.3 sessionStorage

sessionStorage主要是前端開發人員，在前端設置，sessionStorage（會話存儲），只有在瀏覽器被關閉以前使用，建立另外一個頁面時贊成可使用，關閉瀏覽器以後數據就會消失

存儲上限限制：不一樣的瀏覽器存儲的上限也不同，但大多數瀏覽器把上限限制在5MB如下

4.4 websql

Web SQL 是在瀏覽器上模擬數據庫，可使用JS來操做SQL完成對數據的讀寫。它使用 SQL 來操縱客戶端數據庫的 API，這些 API 是異步的，規範中使用的方言是SQLlite。數據庫仍是在服務端，不建議使用，已廢棄

4.5 indexDB

隨着瀏覽器的功能不斷加強，愈來愈多的網站開始考慮，將大量數據儲存在客戶端，這樣能夠減小從服務器獲取數據，直接從本地獲取數據。

現有的瀏覽器數據儲存方案，都不適合儲存大量數據：Cookie 的大小不超過4KB，且每次請求都會發送回服務器；LocalStorage 在 2.5MB 到 10MB 之間（各家瀏覽器不一樣），並且不提供搜索功能，不能創建自定義的索引。因此，須要一種新的解決方案，這就是 IndexedDB 誕生的背景。

通俗地說，IndexedDB 就是瀏覽器提供的本地數據庫，它能夠被網頁腳本建立和操做。IndexedDB 容許儲存大量數據，提供查找接口，還能創建索引。這些都是 LocalStorage 所不具有的。就數據庫類型而言，IndexedDB 不屬於關係型數據庫（不支持 SQL 查詢語句），更接近 NoSQL 數據庫。

關於indexDB的知識能夠查看這篇文章http://www.ruanyifeng.com/blo...

這裏，我只是根據本身的理解整理了一下關於緩存，存儲方面的知識，還有不少不足的地方，更多實踐的知識，還請查看其餘文章，若有錯誤，請指出

參考文章：
https://www.jianshu.com/p/54c...
https://segmentfault.com/a/11...
http://www.cnblogs.com/etoah/...
https://blog.csdn.net/zhouche...