http 缓存
http1.0: expires,last-modifiedhttp1.1 E-tag,cache-controlhtml no-cache
css、js md5/timestmap/version +长缓存
image 随机名字+长缓存
cookie http-onlymtu策略 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 & debouncesetTimeout & requestAnimationFramelazyload & preloadreact lazy suspense视觉欺诈分页预加载
资源
图片 bpg ,webp,慎用base64编码, 响应式图像
字体 font-spider,preconnect
JS 异步加载,tree shaking, code splitting
html dns-prefetch
css 异步加载
其他
web workerWebAssembly 系列(二)JavaScript Just-in-time (JIT) 工作原理前端性能监控错误上报
测试代码的性能http://jsben.ch/https://benchmarkjs.com/https://github.com/jsperf/jsp…
参考资料
浏览器渲染优化前端性能清单前端性能优化 2019 年度总结前端性能上报performance-developers.google.cn
发表回复