http 缓存

http1.0: expires,last-modified
http1.1 E-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 异步加载

其他

web worker
WebAssembly 系列（二）JavaScript Just-in-time (JIT) 事情道理
前端机能监控毛病上报

测试代码的机能
http://jsben.ch/
https://benchmarkjs.com/
https://github.com/jsperf/jsp…

参考资料

浏览器衬着优化
前端机能清单
前端机能优化 2019 年度总结
前端机能上报
performance-developers.google.cn
[2017专题] 机能优化
2019 前端机能优化年度总结