深刻理解瀏覽器緩存機制

瀏覽器緩存機制

前端緩存分爲網絡(HTTP)緩存和瀏覽器本地儲存。html

http-cache.jpg

HTTP 緩存機制

請移步:網絡協議-HTTP-緩存緩存機制前端

瀏覽器本地儲存

咱們先來經過表格學習下這幾種存儲方式的區別vue

特性 Cookie localStorage sessionStorage indexedDB
數據聲明週期 通常由服務器生成,能夠設置過時時間 除非被清理,否在一直存在 頁面關閉就清理 除非被清理,否在一直存在
數據儲存大小 4k 5M 左右 5M 左右 理論無限
與服務端通訊 請求時會攜帶在 Http 的 header 中,對於請求性能稍有影響 不參與 不參與 不參與

<!-- | 用途 | 權限驗證等 -->web

Cookie

主要用於存儲一下用戶相關的信息,如登陸、權限、token 等,可是不宜過大,由於每次 http 請求都會帶上,因此會稍微影響性能。
對於 cookie 來講,還須要注意一些安全性。數據庫

| 屬性 | 做用 |
| value | 如何用於保護用戶登陸態,應該將值加密 |
| http-only | 不能經過 JS 訪問 Cookie,減小 XSS 攻擊 |
| secure | 只能在協議爲 HTTPS 的請求中攜帶 |
| same-site | 規定瀏覽器不能再跨域請求中攜帶 Cookie,減小 CSRF 攻擊 |小程序

Cookie 的本職工做並不是是本地存儲,而是「維持狀態」。
由於 HTTP 是一種無狀態的協議,也就是說,客戶端請求一次,服務端就響應一次,中間沒有留下任何信息。
就像一個常常和你聊天的朋友,天南地北的都什麼都聊,可每次你都不知道大家上一次聊得是什麼,以及他叫什麼名字。
那怎麼辦才能讓他知道我是我呢?
這時候就須要 Cookie 了,Cookie 說白了就是一個存儲在瀏覽器裏的一個小小的文本文件,它附着在 HTTP 請求上,在瀏覽器和服務器之間「飛來飛去」。
它能夠攜帶用戶信息,當服務器檢查 Cookie 的時候,即可以獲取到客戶端的狀態,也就能夠證實我是誰了。
Cookie 是以鍵值對的形式存儲的。後端

優勢

  • 後端設置
  • 解決鑑權問題

缺點

  • 只有 4m,過小
  • 過量的 Cookie 會帶來巨大的性能浪費
  • 不能跨域

Web Storage

localStorage

  • 本地永久儲存,除非手動清除,否在一直存在
  • 大小:5M 左右
  • 用於儲存穩定的資源:如 CSS、js、小圖等。

sessionStorage

  • 頁面回話存儲,關閉頁面自動清除。
  • 大小:5M 左右
  • 用於臨時的數據:如 token、我的信息、權限、購物車信息等

須要注意的是localStorage和sessionStorage都是遵循同源策略的:微信小程序

    • localStorage只要在相同的協議、相同的主機名(二級域名也不行)、相同的端口下,就能讀取/修改到同一份localStorage數據。跨域

      • sessionStorage比localStorage更嚴苛一點,除了協議、主機名(二級域名也不行)、端口外,還要求在同一窗口(也就是瀏覽器的標籤頁)下。

使用

  • 存儲數據:setItem()
    localStorage.setItem('user_name', 'xiuyan')
  • 讀取數據: getItem()
    localStorage.getItem('user_name')
  • 刪除某一鍵名對應的數據: removeItem()
    localStorage.removeItem('user_name')
  • 清空數據記錄:clear()
    localStorage.clear()

indexedDB

IndexedDB 是一個運行在瀏覽器上的非關係型數據庫。既然是數據庫了,那就不是 5M、10M 這樣小打小鬧級別了。瀏覽器

理論上來講,IndexedDB 是沒有存儲上限的(通常來講不會小於 250M)。它不只能夠存儲字符串,還能夠存儲二進制數據。

本人用的也不是不少,具體用法能夠參考:瀏覽器數據庫 IndexedDB 入門教程

PWA

PWA(Progressive web apps,漸進式 Web 應用)運用現代的 Web API 以及傳統的漸進式加強策略來建立跨平臺 Web 應用程序。

這些應用無處不在、功能豐富,使其具備與原生應用相同的用戶體驗優點。 這組文檔和指南告訴您有關 PWA 的全部信息。

其實個人理解,就是在瀏覽器或者其餘客戶端應用緩存一個 webapp,一次使用,就將代碼都緩存到本地,再次打開無需重複加載。

是否是以爲很熟悉,這不就是微信小程序嗎?

其實如今的微信小程序、快應用都算是一種 PWA 的實現。

好比:vuePress 就支持轉 PWA 應用

參考:MDN-PWA

相關文章
相關標籤/搜索