- 课程目录
- 课程介绍
-
在线阅读：开篇词｜前端全链路是提升解决问题效率的关键
对于我们前端同学来说，前端全链路是一门思维提升课，只有不断升级自己的认知领域，你的技术之路才会走得更远更长。
-
01｜前世今生：前端全链路的演进历程
这节课，我会带你了解前端全链路每个关键时期的演变节点。相信通过这节课的学习，你会更了解前端工程师的职责，更能深刻理解全链路的意义，在工作中找到解决项目问题的思路和方法。
-
02｜重要性：为什么要对前端服务做全链路的监控和优化？
用户反馈不应该成为项目开发进度的负担。
-
03｜全链路流程：前端全链路的关键路径有哪些？
前端全链路作为一套快速定位问题的解决方案，更像是技术专项的形式和产品思维角度去实施全链路的整合。把技术和产品结合起来，才能真正满足用户的需求。
-
04｜数据结构（上）：如何设计全链路数据模型
咱们在设计链路日志字段中一直遵守一个原则：最少日志字段原则。这个原则的核心作用是约束。属性字段只用于协助前端同学快速定位问题，而非进行数据分析。如果一条链路日志的字段设计过多，增加研发成本，得不偿失。
-
05｜数据结构（下）：如何设计页面业务问题相关的数据结构？
从记录问题的维度考虑，我们可以把众多的信息字段分成三大类，异常信息类、网页指标类和操作行为类。
-
06｜指纹ID：如何通过指纹ID关联全链路日志？
我们每个人的指纹都是独一无二的，浏览器指纹也是同样道理。
-
07｜网页指标：为何要用WebVitals分析Web应用的用户体验？
基于用户实际使用过程中的不同Web网页指标来衡量一个Web应用的性能情况或者体验效果，总比只看一堆网页加载时不同生命周期的时间戳更靠谱，也更容易判断和解决问题。
-
08｜网页指标：如何快速把Web Vitals集成到实际项目？
尽管Web Vitals在计算公式、衡量标准、浏览器兼容问题以及未来的变化都存在不确定性，但是这些并不妨碍我们通过它发现网页性能问题，尤其是在项目持续迭代后性能下降的情况。
-
09｜接口指标：监听接口状态，收集页面接口异常数据
在实际的应用过程中，可能会出现各种不可预知的接口异常情况。如果没有做好充分的异常处理和维护工作，不仅会导致较差的用户体验，甚至影响整个Web应用的稳定性和可靠性。
-
10｜资源和脚本异常指标：监听资源和脚本状态，收集异常数据
今天，我们继续设计另一个数据指标：前端资源状态。
-
11｜用户行为指标：如何有效监听用户交互行为？
在前端全链路的实现方案里，我们一共需要记录5种用户行为类型，其中操作类型、全局错误、请求类型三种行为都属于通用全局用户行为，其余两种框架内置错误和自定义上报类型则属于业务行为类型。
-
12｜自定义指标：如何通过自定义指标，监控前端页面更多状态
这节课，我们继续学习前端全链路的另一种链路日志，自定义日志。
-
13｜关联后端：如何通过Skywalking把接口关联到后端服务？
前面几节课，我们一直围绕着前端技术栈之间的链路关系学习，例如交互行为、脚本运行错误等等。除了这些，在前端全链路的概念里还有一条链路也是非常重要的，它就是前后端请求调用链路。
-
14｜数据上报方案：如何在不影响用户体验下实现数据上报？
全链路埋点中3个重要知识点，如何选择上报方式，实现上报接口以及确定上报时机。
-
15｜何为监控：让监控成为快速发现问题的重要方法
监控就是更好地理解系统，让我们可以根据实际情况做出最优的决策，提升产品的服务质量，最终提高用户的满意度。
-
16 | 监控规则：设定有效的查询条件规则
一个完整的监控平台，要确保告警的准确性，就需要从大量的日志数据中提取有用的信息和特定数据，然后分析数据、判断阈值，最终才能准确定位问题。
-
17｜数据可视化：可视化监控真的重要吗？
对于前端全链路来说，监控的目的是快速发现问题，但可视化监控的价值并不明显，因此我们认为它是重要但不紧急的任务。
-
18｜告警与决策：如何解决监控警告中焦虑的问题？
协同决策并非由一人来决定，而是多人多团队一起商讨出来的。
-
19 | 卡顿：页面响应卡顿是什么原因造成的？
我们将从性能优化开始，把INP指标优化作为切入点。
-
20｜渲染： 如何优化布局和渲染，提升网页响应速度？
不仅是长任务会影响INP指标，页面布局、渲染和解析HTML会影响INP指标。
-
21｜首字节： 有效衡量网页首字节时间指标
虽然TTFB指标并非网页核心指标，但它仍然是以用户为中心的参考指标。因此，在进行监控时，我们应该重点关注指标的整体情况，而不是单个案例。
-
22｜加载速度： 提升网页首字节时间的问题
优化TTFB指标并没有统一的优化标准和优化方案。不过我可以给你提供4个方向的优化建议，你可以根据实际情况选择最合适的策略。
-
23｜白屏：如何优化APP内前端白屏时间？
上一节课探讨的各种优化方案，都是为了减少TTFB指标。这节课，我们来说说白屏的问题。
-
24｜跳出率：如何快速显示页面内容，降低跳出率？
首次内容绘制（FCP）是网页核心指标，也是前端全链路中的关键节点之一。这节课，我们将重点探讨如何优化这个首次内容绘制指标。
-
25｜字体：解决自定义字体加载问题
除非产品或品牌需要，否则不建议前端项目使用第三方网页字体。
-
26｜视口：可视内容对全链路的重要性
鉴于移动设备的屏幕和分辨率与传统PC桌面不同，LCP更适合应用于移动设备场景。
-
27｜图片：调整策略，优化图片加载问题
要完全优化LCP，除了优化TTFB和FCP之外，还要不断地尝试，通过多次试验找出有效的解决方案。虽然每个项目都是不同的，但优化的思路是一致的，总能找出最佳的解决方案。
-
28｜视觉：避免发生布局偏移影响用户交互
每个项目遇到的问题都不一样，我们需要时刻关注CLS指标，通过开发者工具定位和排查布局偏移，找出有效的优化方案，使前端页面更友好，提升用户体验。
-
29｜经验：优化就是减少请求数量和质量
前端全链路性能优化以用户为中心，不仅要解决用户问题，还要提升产品用户体验。
-
30｜工具：最容易被忽视的工具和定位问题路径
之前的课程我们一直在分析前端页面的问题，每一次分析，都会有工具的出现。今天我们就来说说这些前端辅助工具，看看在使用这些工具的时候，有哪些被我们忽视但又能事半功倍的小细节。
-
结束语｜持续成长，成为最好的自己
过去的我总是觉得命运捉弄人，错过了最佳的时间。但现在，我认为《前端全链路的优化实战课》的结束，是一个新的开始。
-
结课测试｜来赴一场满分之约
结课啦，一起来做套题复习一下吧！
课程介绍
【上新特惠 | 限时 7 折】 你将获得 一套简洁实用的数据指标参考 打造实时监控与故障预警体系 搞定 10+ 前端开发高频难题 解锁你的前端必备提效指南 讲师介绍 课程介绍...【上新特惠 | 限时 7 折】
你将获得
- 一套简洁实用的数据指标参考
- 打造实时监控与故障预警体系
- 搞定 10+ 前端开发高频难题
- 解锁你的前端必备提效指南
讲师介绍
课程介绍
随着Web技术的不断进步，前端工程师所承担的责任也在扩展。我们不仅要负责页面的布局和样式，优化用户交互体验，还要承担后端服务的通信工作。能力上，我们需要具备跨平台、跨设备的适应能力，同时学习不断更新的框架和工具。
不过，前端生态愈发繁荣的同时，我们遇到的问题也在增多。比如：
- 页面性能，处理各种兼容性和网络问题种类不断增加。
- 学了很多种数据指标设计方案，但无法适配业务。
- 反馈杂乱，多任务并行。用户反馈的问题虽然原则上不严重，但必须处理，且排查起来耗时耗力，总是打断平时的开发流程。
- 技术债务。项目中可能存在大量非本人编写的代码，导致代码质量参差不齐，排查问题困难。
基于此，我们邀请到了唐俊开老师开设这门课程。他会结合20年来的前端开发经验，带你搭建一套属于自己的全链路问题解决方案，轻松应对用户问题和线上故障，突破能力天花板。
课程设计
课程内容分为四个部分。
-
基础理论篇：带你学习前端全链路基础理论知识。将全链路拆解为3种要素和它们对应的14条核心路径，你会得到一份后续学习的路线图。
-
全链路核心指标：学习设计日志数据格式的方法，把前端出现的各种异常、页面交互问题以及性能问题关联起来，让你在处理线上问题的时候更快地定位全链路场景的日志。
-
全链路监控：基于前一章设计的指标，继续设计一套故障通知体系，做到及时通知系统故障，再由人为分析、整理，判断每个问题是否需要解决。
-
优化实战篇：综合前面日志埋点和监控的知识，解决高频的页面故障、性能、交互等等问题。
课程目录
适合人群
初级难度。
1-5年Web前端，被各类反馈困扰，影响开发进度，无法专注成长、突破的同学。