前端性能分析
瀏覽器存盤
瀏覽器是由多種存盤方式的，如何選擇他們呢？
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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/89993.html
標籤：其他
上一篇：性能分析-重繪與回流
下一篇：cnblogs 美化主題