课程目录

开篇词 (1讲)

  1. 开篇词｜前端全链路是提升解决问题效率的关键

基础理论 (3讲)

  1. 01｜前世今生：前端全链路的演进历程
  2. 02｜重要性：为什么要对前端服务做全链路的监控和优化？
  3. 03｜全链路流程：前端全链路的关键路径有哪些？

全链路核心指标 (11讲)

  1. 04｜数据结构（上）：如何设计全链路数据模型
  2. 05｜数据结构（下）：如何设计页面业务问题相关的数据结构？
  3. 06｜指纹ID：如何通过指纹ID关联全链路日志？
  4. 07｜网页指标：为何要用WebVitals分析Web应用的用户体验？
  5. 08｜网页指标：如何快速把Web Vitals集成到实际项目？
  6. 09｜接口指标：监听接口状态，收集页面接口异常数据
  7. 10｜资源和脚本异常指标：监听资源和脚本状态，收集异常数据
  8. 11｜用户行为指标：如何有效监听用户交互行为？
  9. 12｜自定义指标：如何通过自定义指标，监控前端页面更多状态
  10. 13｜关联后端：如何通过Skywalking把接口关联到后端服务？
  11. 14｜数据上报方案：如何在不影响用户体验下实现数据上报？

全链路监控 (4讲)

  1. 15｜何为监控：让监控成为快速发现问题的重要方法
  2. 16 _ 监控规则：设定有效的查询条件规则
  3. 17｜数据可视化：可视化监控真的重要吗？
  4. 18｜告警与决策：如何解决监控警告中焦虑的问题？

优化实战篇 (12讲)

  1. 19 _ 卡顿：页面响应卡顿是什么原因造成的？
  2. 20｜渲染： 如何优化布局和渲染，提升网页响应速度？
  3. 21｜首字节： 有效衡量网页首字节时间指标
  4. 22｜加载速度： 提升网页首字节时间的问题
  5. 23｜白屏：如何优化APP内前端白屏时间？
  6. 24｜跳出率：如何快速显示页面内容，降低跳出率？
  7. 25｜字体：解决自定义字体加载问题
  8. 26｜视口：可视内容对全链路的重要性
  9. 27｜图片：调整策略，优化图片加载问题
  10. 28｜视觉：避免发生布局偏移影响用户交互
  11. 29｜经验：优化就是减少请求数量和质量
  12. 30｜工具：最容易被忽视的工具和定位问题路径

结束语 (2讲)

  1. 结束语｜持续成长，成为最好的自己
  2. 结课测试｜来赴一场满分之约