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归属地:浙江
收起评论