前端全链路优化实战课--极客时间课程推荐/优惠

你将获得：

• 一套简洁实用的数据指标参考；
• 打造实时监控与故障预警体系；
• 搞定 10+ 前端开发高频难题；
• 解锁你的前端必备提效指南。

随着Web技术的不断进步，前端工程师所承担的责任也在扩展。我们不仅要负责页面的布局和样式，优化用户交互体验，还要承担后端服务的通信工作。能力上，我们需要具备跨平台、跨设备的适应能力，同时学习不断更新的框架和工具。

不过，前端生态愈发繁荣的同时，我们遇到的问题也在增多。比如：

• 页面性能，处理各种兼容性和网络问题种类不断增加。
• 学了很多种数据指标设计方案，但无法适配业务。
• 反馈杂乱，多任务并行。用户反馈的问题虽然原则上不严重，但必须处理，且排查起来耗时耗力，总是打断平时的开发流程。
• 技术债务。项目中可能存在大量非本人编写的代码，导致代码质量参差不齐，排查问题困难。

基于此，我们邀请到了唐俊开老师开设这门课程。他会结合20年来的前端开发经验，带你搭建一套属于自己的全链路问题解决方案，轻松应对用户问题和线上故障，突破能力天花板。

课程设计

课程内容分为四个部分。

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

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

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

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

开篇词

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

基础理论

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

全链路核心指标

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

全链路监控

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

优化实战篇

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

结束语

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