FE.B-前端效能優化
摘要：
http 快取
http1.0:expires
,last-modified
http1.1E-tag
,cache-control
html no-cache
css、js md5/timestmap/version...
http 快取
http1.0:expires
,last-modified
http1.1E-tag
,cache-control
html no-cache
- css、js md5/timestmap/version +長快取
- image 隨機名字+長快取
cookie http-only
mtu策略 package 1.5kb
可並行請求數
避免重定向，一次重定向至少600ms
瀏覽器快取
localStorage:不超過5M,資料不安全,存取trycatch防止出錯
sessionStorage:關閉瀏覽器失效
service worker（pwa）:install,activate,message,fetch,push,sync(serviceworke.rs)
合理減少header cookie
視覺互動
34-137ms 65ms 54ms 反饋
節流，防抖
throttle & debounce
setTimeout & requestAnimationFrame
lazyload & preload
react lazy suspense
視覺欺詐
分頁預載入
資源
- 圖片bpg ，webp,慎用base64編碼,響應式影象
- 字型 font-spider,preconnect
- JS 非同步載入,tree shaking, code splitting
- html dns-prefetch
- css 非同步載入