382 字
1 分钟
前端性能优化：只要我跑得够快，Bug 就追不上我
性能优化：无底洞
说页面加载太慢，要优化。好，我优化。
你知道的，一个 Three.js 地图，配上一大堆数据，想靠改两个配置就秒开基本不现实。
漫漫长路
- 先测量：用 Performance、Network 和构建分析确认时间到底花在下载、解析、主线程还是 GPU。
- 代码分割：路由懒加载，地图模块延后加载，先让正文和操作区可用。
- 资源分级：图片生成缩略图，模型和大数据按视口或交互加载，静态资源设置长期缓存。
- 减少每帧工作量：合并几何体、降低不必要的重绘，按设备能力调整像素比。
- 检查产物：确认 Tree Shaking 是否生效，避免整包引入只用到一小部分的库。
结果呢？
首屏快了一些，但拖动地图反而更卡。原因是我只优化了下载体积，没有解决每帧的渲染和数据更新开销。
心态崩了
毁灭吧，赶紧的。累了。
为什么这么难？
性能优化最折磨人的地方，是每一项指标都可能来自不同瓶颈。没有基线数据时，“上 WebP”“加懒加载”都只是抽卡；先测量、一次改一项、再对比，至少能知道头发掉在哪里。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
前端性能优化：只要我跑得够快，Bug 就追不上我
https://blog.luozili.work/posts/vue-learning-11/ 部分信息可能已经过时
相关文章 智能推荐
1
TypeScript：给代码穿上防弹衣 (虽然很重)
Vue学习之路 从一串类型报错出发，记录 Vue 3 项目接入 TypeScript 后的学习成本、常见问题和实际收益。
2
Ref vs Reactive：响应式的哲学思考 (头秃篇)
Vue学习之路 对比 Vue 3 中 ref 与 reactive 的使用边界，以及解构、替换对象和模板自动解包时容易踩到的坑。
3
生命周期钩子：生老病死，Vue 组件的一生
Vue学习之路 按创建、挂载、更新和卸载阶段梳理 Vue 3 组件生命周期，以及各类钩子的典型使用场景。
4
Vite：快！太快了！由于速度太快我跟不上了
Vue学习之路 记录 Vite 开发服务器的速度优势，以及生产构建、依赖预构建、路径和插件兼容问题带来的反差。
5
逐渐暴躁：为什么前端框架更新这么快？！
Vue学习之路 一篇关于前端生态快速迭代、知识焦虑和如何选择学习重点的阶段性吐槽。