前端全链路优化实战课

共 34 讲。

目录

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