FE.B-前端性能优化

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 前端性能优化年度总结