性能分析-瀏覽器存儲

前端性能分析

瀏覽器存儲

瀏覽器是由多種存儲方式的，如何選擇他們呢？

cookie

• 由於HTTP請求無狀態，因此須要cookie去維持客戶端狀態
• 過時時間 expire
• cookie的生成方式
  • http response header中的set-cookie
  • js中能夠經過document.cookie能夠讀寫cookie
• 僅僅做爲瀏覽器存儲（大小4KB左右，能力被localstorage替代）
• cookie中在相關域名下面 —— cdn的流量損耗
• httponly

localstorage

= HTML5設計出來專門用於瀏覽器存儲的

• 大小爲5M左右
• 僅在客戶端使用，不和服務端進行通訊
• 接口封裝較好
• 瀏覽器本地緩存方案

sessionstorage

• 會話級別的瀏覽器存儲
• 大小爲5M左右
• 僅在客戶端使用，不和服務端進行通訊
• 接口封裝較好
• 對於表單信息的維護

IndexDB

• IndexedDB 是一種低級API，用於客戶端存儲大量結構化數據。該API使用索引來實現對該數據的高性能搜索。雖然 Web Storage 對於存儲較少許的數據頗有用，但對於存儲更大量的結構化數據來講，這種方法不太有用。IndexedDB提供了一個解決方案。
• 爲應用建立離線版本

PWA

PWA (Progressive Web Apps) 是一種 Web App 新模型，並非具體指某一種前沿的技術或者某一個單一的知識點，咱們從英文縮寫來看就能看出來，這是一個漸進式的 Web App，是經過一系列新的 Web 特性，配合優秀的 UI 交互設計，逐步的加強 Web App 的用戶體驗。

• 可靠：在沒有網絡的環境中也能提供基本的頁面訪問，而不會出現「未鏈接到互聯網」的頁面。
• 快速：針對網頁渲染及網絡數據訪問有較好優化。
• 融入（Engaging）：應用能夠被增長到手機桌面，而且和普通應用同樣有全屏、推送等特性。

可使用Chrome瀏覽器的lighthouse來查看網站有關PWD的支持狀況

Service Worker

Service Worker 是一個腳本，瀏覽器獨立於當前網頁，將其在後臺運行,爲實現一些不依賴頁面或者用戶交互的特性打開了一扇大門。在將來這些特性將包括推送消息,背景後臺同步， geofencing（地理圍欄定位），但它將推出的第一個首要特性，就是攔截和處理網絡請求的能力，包括以編程方式來管理被緩存的響應。

Service Worker生命週期

兩條Chrome跟Service Worker有關的命令

chrome://serviceworker-internals/
chrome://inspect/#service-workers