拉勾教育 - 前端性能优化方法与实战｜掌握优化方法论，突破 Web页面性能瓶颈

本专栏会从前端性能优化方法论、指标采集上报及优化手段、Hybrid 下的进阶优化、性能优化数据评估及预警和一线大厂性能优化体系演进五个方面讲解，带你掌握优化方法论，突破 Web 页面性能瓶颈。

课程背景

对前端工程师而言，性能优化能力决定了你的职业发展高度。 想成为大厂前端或者高级前端工程师，性能优化必须要做到心中有数。

在实际工作当中，前端性能优化往往比较繁杂，防布局抖动、HTML 优化、图片加载优化等等，许多细节都需要顾及到。想要更好地掌握前端性能优化，你需要拥有正确的方法论和实战技巧。

专栏解读

本专栏会从前端性能优化方法论、指标采集上报及优化手段、Hybrid 下的进阶优化、性能优化数据评估及预警和一线大厂性能优化体系演进五个方面讲解，带你掌握优化方法论，突破 Web 页面性能瓶颈。

模块一 性能优化方法论：这个模块会系统讲解性能优化的方法论。比如，性能优化整个体系是怎样的；在页面加载过程中都有哪些性能瓶颈点等等。学完这部分，你将对整个前端性能优化体系有个全面了解，并知道优化落地过程中需要注意哪些方面。

模块二 性能优化指标采集上报及常见优化手段：这个模块主要讲解在优化实战过程中，如何确定性能指标，如何采集上报等等。此外，讲师还会展开讲解指标采集和上报实践过程中遇到的坑。学完这部分，你将掌握首屏时间、白屏、卡顿、网络环境指标的采集办法和上报策略。

模块三 性能问题诊断及优化手段：这个模块重点介绍，如何根据性能平台问题，结合一些检查清单（如全量 VS 增量、同步 VS 异步）来诊断性能问题；如何进行预警监控等等。通过这一模块的学习，你将学会如何搭建一个性能监控预警平台，并学会利用它来进行性能诊断和优化。

模块四 Hybrid 下的进阶优化手段：这个模块会介绍，在 App端的性能优化，详细讲解 hybrid 体系建设、SSR方案、webview层优化等等。学完这个模块，你将掌握离线包设计、骨架屏和 SSR优化手段，WebView 层及代码架构层面优化等等，在Hybrid下的进阶优化手段。

模块五 一线大厂性能优化体系演进：这个模块讲师会介绍，一线大厂的性能解决方案和演进过程，比如，腾讯的首屏方案和美团的首屏方案各有哪些优缺点，分别适合哪些场景；使用多端方案场景的业务，我们该如何优化性能等等。 通过这个模块的学习，你会了解一线大厂性能优化方案。

讲师介绍

溪风 前58集团技术副总监

曾带领团队完成58集团公司级重点项目，前后端解耦和奥林匹亚性能优化，为公司带来巨大商业收益。曾担任百度技术leader，负责百度文库团队研发管理工作，多年的前端开发和团队管理经验，在javascript进阶实战、前端性能优化、前后端开发模式变革等方面具有丰富的实战经验。

拉勾教育 – 前端性能优化方法与实战课程目录

开篇词 开启刻意练习之路，进阶前端性能技术专家
01 体系总览：性能优化体系及关键指标设定
02 性能瓶颈点：从 URL 输入到页面加载整过程分析
03 案例分析：移动端 M 站性能优化落地注意事项
04 指标采集：首屏时间指标采集具体办法
05 指标采集：白屏、卡顿、网络环境指标采集方法
06 工具实践：性能 SDK 及上报策略设计
07 平台实践：如何从 0 到 1 搭建前端性能平台
08 诊断清单：如何实现监控预警并进行问题诊断
09 优化手段：首屏秒开的 4 重保障
10 优化手段：白屏 300m 和界面流畅优化技巧
11 工具实践：如何进行性能专项测试
12 理论分析：Hybrid 下的性能优化整体分析
13 高级进阶：保证首次加载为秒开的离线包设计
14 高级进阶：瞒天过海的骨架屏及 SSR 优化手段
15 高级进阶：WebView 层及代码架构层面优化
16 黑科技：详解预请求、预加载及预渲染机制
17 横向对比：百度、阿里云、美团性能方案对比
18 性能演进：RN、Flutter、小程序和 Enhance Hybrid
19 成长之路：前端技术专业能力与业务产出平衡
结束语 开启性能优化实践之路
课程文档

课程大纲