课程简介

课程内容分为四个部分

基础理论篇：带你学习前端全链路基础理论知识。将全链路拆解为 3 种要素和它们对应的 14 条核心路径，你会得到一份后续学习的路线图

全链路核心指标：学习设计日志数据格式的方法，把前端出现的各种异常、页面交互问题以及性能问题关联起来，让你在处理线上问题的时候更快地定位全链路场景的日志

全链路监控：基于前一章设计的指标，继续设计一套故障通知体系，做到及时通知系统故障，再由人为分析、整理，判断每个问题是否需要解决

优化实战篇：综合前面日志埋点和监控的知识，解决高频的页面故障、性能、交互等等问题

课程目录

• 开篇词｜前端全链路是提升解决问题效率的关键.md
• 开篇词｜前端全链路是提升解决问题效率的关键
• 01｜前世今生：前端全链路的演进历程.md
• 01｜前世今生：前端全链路的演进历程
• 02｜重要性：为什么要对前端服务做全链路的监控和优化？.md
• 02｜重要性：为什么要对前端服务做全链路的监控和优化？
• 03｜全链路流程：前端全链路的关键路径有哪些？.md
• 03｜全链路流程：前端全链路的关键路径有哪些？
• 04｜数据结构（上）：如何设计全链路数据模型.md
• 04｜数据结构（上）：如何设计全链路数据模型
• 05｜数据结构（下）：如何设计页面业务问题相关的数据结构？.md
• 05｜数据结构（下）：如何设计页面业务问题相关的数据结构？
• 06｜指纹ID：如何通过指纹ID关联全链路日志？.md
• 06｜指纹ID：如何通过指纹ID关联全链路日志？
• 07｜网页指标：为何要用WebVitals分析Web应用的用户体验？.md
• 07｜网页指标：为何要用WebVitals分析Web应用的用户体验？
• 08｜网页指标：如何快速把WebVitals集成到实际项目？.md
• 08｜网页指标：如何快速把WebVitals集成到实际项目？
• 09｜接口指标：监听接口状态，收集页面接口异常数据.md
• 09｜接口指标：监听接口状态，收集页面接口异常数据
• 10｜资源和脚本异常指标：监听资源和脚本状态，收集异常数据.md
• 10｜资源和脚本异常指标：监听资源和脚本状态，收集异常数据
• 11｜用户行为指标：如何有效监听用户交互行为？.md
• 11｜用户行为指标：如何有效监听用户交互行为？
• 12｜自定义指标：如何通过自定义指标，监控前端页面更多状态.md
• 12｜自定义指标：如何通过自定义指标，监控前端页面更多状态
• 13｜关联后端：如何通过Skywalking把接口关联到后端服务？.md
• 13｜关联后端：如何通过Skywalking把接口关联到后端服务？
• 14｜数据上报方案：如何在不影响用户体验下实现数据上报？.md
• 14｜数据上报方案：如何在不影响用户体验下实现数据上报？
• 15｜何为监控：让监控成为快速发现问题的重要方法.md
• 15｜何为监控：让监控成为快速发现问题的重要方法
• 16-监控规则：设定有效的查询条件规则.md
• 16-监控规则：设定有效的查询条件规则
• 17｜数据可视化：可视化监控真的重要吗？.md
• 17｜数据可视化：可视化监控真的重要吗？
• 18｜告警与决策：如何解决监控警告中焦虑的问题？.md
• 18｜告警与决策：如何解决监控警告中焦虑的问题？
• 19-卡顿：页面响应卡顿是什么原因造成的？.md
• 19-卡顿：页面响应卡顿是什么原因造成的？
• 20｜渲染：如何优化布局和渲染，提升网页响应速度？.md
• 20｜渲染：如何优化布局和渲染，提升网页响应速度？
• 21｜首字节：有效衡量网页首字节时间指标.md
• 21｜首字节：有效衡量网页首字节时间指标
• 22｜加载速度：提升网页首字节时间的问题.md
• 22｜加载速度：提升网页首字节时间的问题
• 23｜白屏：如何优化APP内前端白屏时间？.md
• 23｜白屏：如何优化APP内前端白屏时间？
• 24｜跳出率：如何快速显示页面内容，降低跳出率？.md
• 24｜跳出率：如何快速显示页面内容，降低跳出率？
• 25｜字体：解决自定义字体加载问题.md
• 25｜字体：解决自定义字体加载问题
• 26｜视口：可视内容对全链路的重要性.md
• 26｜视口：可视内容对全链路的重要性
• 27｜图片：调整策略，优化图片加载问题.md
• 27｜图片：调整策略，优化图片加载问题
• 28｜视觉：避免发生布局偏移影响用户交互.md
• 28｜视觉：避免发生布局偏移影响用户交互
• 29｜经验：优化就是减少请求数量和质量.md
• 29｜经验：优化就是减少请求数量和质量
• 30｜工具：最容易被忽视的工具和定位问题路径.md
• 30｜工具：最容易被忽视的工具和定位问题路径
• 结课测试｜来赴一场满分之约.md
• 结束语｜持续成长，成为最好的自己.md
• 结束语｜持续成长，成为最好的自己
• 资料
• images
• videos
• 19-卡顿：页面响应卡顿是什么原因造成的？
• 25｜字体：解决自定义字体加载问题
• 27｜图片：调整策略，优化图片加载问题
• 30｜工具：最容易被忽视的工具和定位问题路径