前端全链路优化实战课
15
15
1.0x
00:00/00:00
登录|注册

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
立即购买
登录 后留言

全部留言(1)

  • 最新
  • 精选
  • 特伦酥
    请问老师,课程中的示例代码仓库在哪里呢?
    2024-05-10归属地:浙江
收起评论
显示
设置
留言
1
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部