前端緩存的方式

緩存模式

概念 瀏覽器緩存是瀏覽器端保存數據用於快速讀取或避免重複優化機制.

緩存類別 前端緩存主要分爲http緩存和瀏覽器緩存,其中http緩存是在http進行傳輸的時候的緩存,主要在服務器上設置,而瀏覽器緩存則是存儲的客戶端的,能夠經過js對瀏覽器的存儲進行操做

緩存優勢

• 緩存能夠說是性能優化中簡單高效的一種優化方式.一個優秀的緩存策略能夠縮短網頁請求資源的距離,減小延遲,而且因爲緩存文件能夠重複利用,還能夠減小帶寬,下降網絡負荷
• 對於一個數據請求來講,能夠分爲網絡請求,後端處理 瀏覽器形影三個步驟.瀏覽器緩存能夠幫助咱們在第一和第三步驟中優化性能,好比說直接使用緩存而不發請求,或者是發起了請求,可是後端存儲的數據與前端一致,那麼就沒有必要再將數據回傳回來,這樣就減小了響應數據

http緩存

http緩存分爲強制緩存和協商緩存
複製代碼

強制緩存

強制緩存(本身強制決定)就是向瀏覽器緩存查找該請求結果,而且根據該結果的緩存規則決定是否使用該緩存結果,強制緩存的狀況主要有三種:

• 1)不存在該緩存結果和緩存標識，強制緩存失效，則直接向服務器發起請求（跟第一次發起請求一致）

• 2)協議中有這種緩存結果和緩存標識,可是結果已經失效,強制緩存失效,則使用協商緩存

  

• 3)協議中存在緩存結果和緩存標識,且該結果還沒有生效,強制緩存生效,直接返回該結果

  

強制緩存規則

瀏覽器在向服務器發送http請求的時候,服務器會將緩存規則返給http響應報文的http頭和請求結果一塊兒返回給瀏覽器,其中控制強制緩存的字段分別是Expires和Cache-Control，其中Cache-Control優先級比Expires高。

• expires
  • Expires是HTTP/1.0控制網頁緩存的字段，其值爲服務器返回該請求結果緩存的到期時間，即再次發起該請求時，若是客戶端的時間小於Expires的值時，直接使用緩存結果。
  • 到了HTTP/1.1，Expire已經被Cache-Control替代，緣由在於Expires控制緩存的原理是使用客戶端的時間與服務端返回的時間作對比，那麼若是客戶端與服務端的時間由於某些緣由（例如時區不一樣；客戶端和服務端有一方的時間不許確）發生偏差，那麼強制緩存則會直接失效，這樣的話強制緩存的存在則毫無心義
• Cache-Control

在HTTP/1.1中，Cache-Control是最重要的規則，主要用於控制網頁緩存，主要取值爲：

public：全部內容都將被緩存（客戶端和代理服務器均可緩存）

private：全部內容只有客戶端能夠緩存，Cache-Control的默認取值

no-cache：客戶端緩存內容，可是是否使用緩存則須要通過協商緩存來驗證決定

no-store：全部內容都不會被緩存，即不使用強制緩存，也不使用協商緩存

max-age=xxx (xxx is numeric)：緩存內容將在xxx秒後失效

複製代碼

協商緩存

協商緩存就是強制緩存失效後，瀏覽器攜帶緩存標識向服務器發起請求，由服務器根據緩存標識決定是否使用緩存的過程，主要有如下兩種狀況： 1)協商緩存生效，返回304，

2)協商緩存失效，返回200和請求結果結果

一樣，協商緩存的標識也是在響應報文的HTTP頭中和請求結果一塊兒返回給瀏覽器的，控制協商緩存的字段分別有：Last-Modified / If-Modified-Since和Etag / If-None-Match，其中Etag / If-None-Match的優先級比Last-Modified / If-Modified-Since高。
複製代碼

綜述

強制緩存優先於協商緩存進行，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，若不生效則進行協商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協商緩存由服務器決定是否使用緩存，若協商緩存失效，那麼表明該請求的緩存失效，從新獲取請求結果，再存入瀏覽器緩存中；生效則返回304，繼續使用緩存，主要過程以下：

瀏覽器緩存

本地存儲小容量

cookie

1)http是一種無狀態的協議,因此每次客戶端請求服務器的時候都是'初次見面',因此每次接收用戶請求時,都是沒法肯定用戶的身份,
2)爲了解決這個無狀態問題,會在登陸成功時,服務端再響應頭中存儲着cookie信息服務端給用戶下發cookie的數據(假設是一張小票),
3)等之後用戶再請求服務端時，帶着小票一塊兒發送過去(自動)，服務端檢測小票的信息便可判斷這個用戶使用訪問過
複製代碼

cookie的數據是存儲在客戶端的,存儲容量只有4k

• cookie能完成的部分應用，還有更多的功能須要全局變量。cookie的缺點主要集中於安全性和隱私保護。主要包括如下幾種：

  • （1）cookie可能被禁用。當用戶很是注重我的隱私保護時，他極可能禁用瀏覽器的cookie功能；
  • （2）cookie是與瀏覽器相關的。這意味着即便訪問的是同一個頁面，不一樣瀏覽器之間所保存的cookie也是不能互相訪問的；
  • （3）cookie可能被刪除。由於每一個cookie都是硬盤上的一個文件，所以頗有可能被用戶刪除；
  • （4）cookie安全性不夠高。全部的cookie都是以純文本的形式記錄於文件中，所以若是要保存用戶名密碼等信息時，最好事先通過加密處理。 session

• session實現方式：

  • 由於cookie是保存在客戶端的，用戶能夠隨意修改或僞造
  • 服務端再也不將數據直接下發到客戶端保存了，而是將數據保存在服務端
  • 下發的是保存數據區域的標識(手牌)
  • 用戶下次請求時帶着標識到服務端，開箱子讀取數據進行操做便可

• 好處：確保數據沒法被用戶操做，安全

localStorage

LocalStorage的數據將一直保存在瀏覽器內，直到用戶清除瀏覽器緩存數據爲止。存儲容量爲5M

• 生命週期：聲明週期永久生效，除非手動刪除 不然關閉頁面也會存在
• 數據共享：同一個瀏覽器中打開兩個頁面是同源的，就能夠共享localStorage數據
  • 若是兩個頁面的協議，端口（若是有指定）和主機都相同，則兩個頁面具備相同的源
• 語法：
  • 存儲數據：localStorage.setItem(key, value)
  • 獲取數據：localStorage.getItem(key)
  • 刪除數據：localStorage.removeItem(key)
  • 清空數據：(全部都清除掉)localStorage.clear()

sessionStorage

• 生命週期： 爲關閉瀏覽器窗口
• 數據共享：在同一個窗口(頁面)下數據能夠共享
• 語法：
  • 存儲數據：sessionStorage.setItem(key, value)
  • 獲取數據：sessionStorage.getItem(key)
  • 刪除數據：sessionStorage.removeItem(key)
  • 清空數據：(全部都清除掉) sessionStorage.clear()

applicationCache

HTML5的應用緩存（application cache），或者簡稱爲 appcache，是專門爲開發離線 Web 應用而設計 的。Appcache就是從瀏覽器的緩存中分出來的一塊緩存區。要想在這個緩存中保存數據，可使用一個 描述文件（manifest file），列出要下載和緩存的資源

本地存儲大容量

webSql(被廢棄)

websql這種方式只有較新的chrome瀏覽器支持，並以一個獨立規範形式出現，主要有如下特色 Web Sql 數據庫API 實際上不是HTML5規範的組成部分； 在HTML5以前就已經存在了，是單獨的規範； 它是將數據以數據庫的形式存儲在客戶端，根據需求去讀取；

• 跟Storage的區別是：

  • Storage和Cookie都是以鍵值對的形式存在的；
  • Web Sql 更方便於檢索，容許sql語句查詢；
  • 讓瀏覽器實現小型數據庫存儲功能；
  • 這個數據庫是集成在瀏覽器裏面的，目前主流瀏覽器基本都已支持；

• websql API主要包含三個核心方法：

  • openDatabase : 這個方法使用現有數據庫或建立新數據庫建立數據庫對象。
  • transaction : 這個方法容許咱們根據狀況控制事務提交或回滾。
  • executeSql : 這個方法用於執行真實的SQL查詢。

indexDB(非關係型數據庫)

IndexedDB 是一個爲了可以在客戶端存儲可觀數量的結構化數據，而且在這些數據上使用索引進行高性能檢索的 API。雖然 DOM 存儲 對於存儲少許數據是很是有用的，可是它對大量結構化數據的存儲就顯得力不從心了。IndexedDB 則提供了這樣的一個解決方案。 IndexedDB 分別爲同步和異步訪問提供了單獨的 API 。同步 API 原本是要用於僅供 Web Workers 內部使用，可是尚未被任何瀏覽器所實現。異步 API 在 Web Workers 內部和外部均可以使用，另外瀏覽器可能對indexDB有50M大小的限制，通常用戶保存大量用戶數據並要求數據之間有搜索須要的場景。 異步API

往返緩存

往返緩存又稱爲BFCache，是瀏覽器在前進後退按鈕上爲了提高歷史頁面的渲染速度的一種策略。該策略具體表現爲，當用戶前往新頁面時，將當前頁面的瀏覽器DOM狀態保存到bfcache中；當用戶點擊後退按鈕的時候，將頁面直接從bfcache中加載，節省了網絡請求的時間。