FE.B-前端性能优化

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理