作為一名前端工作人員，前端的快取知識是必須掌握的，因為一個網站開啟網頁的速度直接關係到使用者體驗，使用者粘度，而提高網頁的開啟速度有很多方面需要優化，其中比較重要的一點就是利用好快取，快取檔案可以重複利用，還可以減少頻寬，降低網路負荷。

IIS7.COM網站整站下載網站映象
1、可多站同時下載、多站同時扒
2、可單頁扒
3、可自定義， 重寫JS\圖片\CSS路徑
4、執行全站下載後，會下載到本程式根目錄下的html資料夾下。
5、全站替換，根據關鍵詞替換。N個（多個）關鍵詞替換。
6、多執行緒下載
7、自動補齊404不存在的連結頁面（下載大站的時候需要）
8、插入自定義的JS（全站插入）

9、整站下載
10、單頁下載
此程式可以做到:
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

缺點：1、某些服務端不能獲取精確的修改時間 2、檔案修改時間改了，但檔案內容卻沒有變

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快取都遵循客戶端與服務端之間的快取機制

4、本地儲存

本地儲存主要有以下幾種，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

伺服器遠端桌面連線
本工具可以做到：
1、批量管理WIN系列伺服器、VPS。
2、批量匯入伺服器VPS的IP，埠，賬號和密碼
3、批量開啟N個伺服器VPS的遠端桌面
4、遠端桌面後，遠端視窗右上角會出現 伺服器備註的資訊，如鄭州xxx號伺服器
5、遠端桌面後，不影響工作列顯示。可以及時看其他視窗。
6、自定義遠端桌面視窗解析度
7、定時監測伺服器是否正常
8、提醒快伺服器到期

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...