前端全链路优化实战课
唐俊开
前阿里前端技术专家,前教育企业前端总监
195 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已更新 2 讲/共 32 讲
基础理论 (1讲)
前端全链路优化实战课
15
15
1.0x
00:00/00:00
登录|注册

01|前世今生:前端全链路的演进历程

你好,我是三桥。
我们在开篇词说过,前端全链路能够在发现问题、定位问题、判断链路问题、解决问题这 4 个方面帮我们解决效率上的困境。
这么好的解决方案是怎么发展出来的呢?这就需要我们先回顾一下前端技术的发展历程了。
这节课,我会带你了解前端全链路每个关键时期的演变节点。相信通过这节课的学习,你会更了解前端工程师的职责,更能深刻理解全链路的意义,在工作中找到解决项目问题的思路和方法。
在前端全链路真正被广泛应用之前,前端技术经历了 4 个重要时期:Ajax 和 jQuery 的页面生态、前后端分离、前端工程化和大前端时代。
不过这次,我们要再往前一点,从“页面仔”这个前身说起。

前身:为什么叫我“页面仔”?

1990 年,第一个 Web 浏览器诞生。1991 年,世界上第一个 WWW 网站实现。Web 的出现最早是为了解决信息共享和交流的问题。当时 Web 还不存在 JavaScript 和 CSS 语言,主要以纯静态页面存在,即只有极其简单的 HTML 页面,没有任何交互动效。
后来,随着互联网迅速发展,出现了许多不同的浏览器,新的编程语言被开发出来,HTML 也逐渐升级、完善。这些发展都给前端技术提供了最佳的环境基础。虽然浏览器提供的 Web 能力还是很基础,例如有限的 HTML 标签,还有只用 10 天就设计出来的 JavaScript 语言,但这些已经为前端实现动态交互页面提供了基本条件。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

1. 前端全链路的演进历程包括四个重要时期:Ajax和jQuery的页面生态、前后端分离、前端工程化和大前端时代。 2. 前后端分离的开发模式推动了数据维度和交互维度的变化,使前端和后端职责更加清晰和独立。 3. 前端同学在前后端分离中需要解决从浏览器向服务器端请求接口数据的链路过程问题,做好状态维护,保障数据的准确性。 4. 大前端时代下,Vue和React成为前端技术选型的首选框架,前端的工作和职责变得越来越重要,包括完成大型Web应用的开发和封装UI公共组件。 5. 前端全链路的作用是追踪用户的交互行为,记录用户的实际业务流程,以便排查定位问题和提升用户体验。 6. 随着前端技术标准的升级,Fetch标准逐渐取代Ajax,使前后端接口之间的链路关联更容易实现。 7. 前端全链路的应用范围扩展到小程序、PC端、App端以及多屏和大屏的问题,为用户交互多样化提供支持,并能通过监控提前发现问题,优化用户体验。 8. 前端技术的核心价值在于满足用户端交互多样化的能力,而前端全链路是保证用户交互操作出现异常时能够及时反馈到研发团队并优化的重要基础。 9. 前端全链路技能需要不断实践、反复强化,锻炼兼容技能、数据分析技能以及性能优化等一系列综合素质能力。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《前端全链路优化实战课》
新⼈⾸单¥59
立即购买
登录 后留言

精选留言

由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论
显示
设置
留言
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部
文章页面操作
MAC
windows
作用
esc
esc
退出沉浸式阅读
shift + f
f11
进入/退出沉浸式
command + ⬆️
home
滚动到页面顶部
command + ⬇️
end
滚动到页面底部
⬅️ (仅针对订阅)
⬅️ (仅针对订阅)
上一篇
➡️ (仅针对订阅)
➡️ (仅针对订阅)
下一篇
command + j
page up
向下滚动一屏
command + k
page down
向上滚动一屏
p
p
音频播放/暂停
j
j
向下滚动一点
k
k
向上滚动一点
空格
空格
向下滚动一屏
播放器操作
MAC
windows
作用
esc
esc
退出全屏
⬅️
⬅️
快退
➡️
➡️
快进
空格
空格
视频播放/暂停(视频全屏时生效)