10｜资源和脚本异常指标：监听资源和脚本状态，收集异常数据
唐俊开
你好，我是三桥。
前两节课，我们学习了读取网页指标和封装接口状态的方法，同时通过实战把有效信息转化为数据指标模型，并且封装到了前端全链路 SDK 里面。
今天，我们继续设计另一个数据指标：前端资源状态。
前端资源是用户体验的重要资产
曾经有一个前端项目我印象特别深刻，主要是做 H5 营销活动的前端工程。
我评估完这个前端工程后，发现两个有趣的问题。
首先，这个项目是基于 Vue 技术栈实现的，src 目录下有超过 200 个目录，每个目录就是一个独立的营销活动。目录内不仅包含了 JavaScript 代码和 CSS 代码，还包括图片和视频。
第二，使用本地和生产环境打包后运行项目发现，每个活动页面加载的前端 JavaScript 文件超过 300 个，而且每个页面加载时间接近 5 秒以上。
我就好奇，难道这个项目一直没有用户反馈加载慢的问题吗？我认为肯定有的。那为什么没有前端同学去优化这个项目呢？我猜，要么是能力有限，要么是改造工程量大。
像这种前端项目，不影响业务使用和用户体验倒还好，但如果因为加载速度慢导致用户留存率低，那真的只能怪前端同学了。
类似加载超过 300 个 JavaScript 文件这样的问题，其实是由于前端工程的打包工具没处理好，导致所有目录的 JS 逻辑都被打包进来了，并且是一次性统一加载的。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
1. 前端资源对用户体验的重要性，特别是在Web应用中 2. 全局监听前端资源状态，包括绑定全局error事件来监听资源加载情况 3. 使用PerformanceObserver对象实现前端资源加载速度的实时监听 4. 通过监听资源加载时间，可以判断FCP和LCP优化的方向 5. 前端资源加载速度对用户体验的影响，尤其是JavaScript和CSS的加载成功率和性能的重要性 6. 如何有效监听脚本异常，全局监听error事件，判断是否为前端资源，存储错误信息 7. Vue框架提供的errorHandler事件用于捕获组件内部异常，需要记录全链路相关日志 8. 前端资源是Web应用的重要资产，需要关注资源文件加载状态、资源响应时长以及脚本运行时报错 9. 前端页面的每一步交互动作都影响用户体验，稳定性、加载速度和业务逻辑的兼容性是前端同学需要提高的技能 10. 除了通用问题，前端项目还需要关注其他资源类问题，例如用户上传图片是否成功、音视频播放等。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《前端全链路优化实战课》，新⼈⾸单¥59
《前端全链路优化实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(1)
- 最新
- 精选
特伦酥
请问老师，课程中的示例代码仓库在哪里呢？2024-05-10归属地：浙江
收起评论