少游_JuniorTour

这篇文章是《前端体验优化实战》小册第二节发布后半年追加的重写优化版。使用了最新版的 Grafana Alloy 作为演示，并且配套视频教程，致力于解决大家在安装过程中遇到的报错、数据未上报等问题。

在这个大喜的日子，很高兴能给大家做一次分享。 我是少游，英文昵称 JuniorTour，在掘金和GitHub上都可以找到我。 我是《前端工程体验优化实战》一书的作者，也是Vuejs的贡献者

各位战友好，我是少游_JuniorTour。2024开发者大会，我争取到了一张门票，可以免费送给有缘的朋友。大家可以先看看大会的内容，有兴趣参加的话，文章末尾有门票抽奖的方式。

仅需2行代码，就能让JS文件的加载耗时减少951ms（-67%），代码实现也非常简单方便，耐心看完，一定会有所收获

有了获取用户体验指标数据的工具，还需要进一步大量收集、细致分析这些数据，以便了解现状、确定优化方向。 笔者推荐一套经过实践检验、开发体验较好的开源工具：Prometheus 和 Grafana。

性能优化不等于体验优化。以往谈到优化，我们常常关注的是前端性能优化，但性能优化只是我们改善前端项目的方式之一，目标不明确的性能优化并不能真正地优化前端项目，改善用户体验和开发体验才

上一节《一、template 字符串编译为抽象语法树 AST》中，我们实现了template渲染为AST的逻辑，距离最终目标「渲染为真实DOM」更近了一步！ 这一节，我们来继续实现 AST 编译为渲

Vue.js 并没有什么神秘的魔法，模板渲染、虚拟 DOM diff，也都是一行行代码基于 API 实现的。

连尤雨溪都没实现！基于Babel 让 Vue.js SFC 支持可选链 Optional Chaining(?.)、空值合并 Nullish Coalescing(??)