你会学到什么？
- 众多前端领域先进优化方案：
- 1.4秒到0.4秒——用2行代码让JS加载耗时减少67%；
- 用3分钟为公司省下70万——CDN最佳实践；
- JS加载体积减少13%——超简单的模块懒加载；
- 图片加载体积减少20%——自适应选择最优图片格式；
- 缓存命中率提高20%——代码分割最佳实践；
- 打包耗时减少43%——现代构建工具的魔力；
- GIF体积减少80%——GIF图片优化；
- CSS开发体验优化——6中方案解决CSS痛点；
- ……
- 量化评估前端项目用户体验、优化效果的实用工具和方法论。
- 定位前端项目体验痛点的能力，领悟前端体验优化的思路。
- 形成数据驱动的理念，助力职业发展、升职加薪。
- 经过实践检验、行之有效的技术改进长效化机制：
- 打造技术改进文化——征求意见稿制度
- 技术改进任务池和任命技术产品经理
- 业务需求开发最佳流程
- 一错不再错-用自动化测试避免功能衰退
课程简介
用户体验决定着前端项目的存亡，但前端性能优化不等于用户体验优化。
这本书致力于解决以往前端优化的诸多痛点：
- 目标不明确： 只会照本宣科，把别人的优化手段生搬硬套到自己的项目，找不到自己的优化目标。
- 缺乏量化指标： 无法评估优化效果，拿不出客观、可量化的指标证明优化效果。
- 没有实质性的改善用户体验： 优化效果对用户主观体验影响甚微，无法让用户直观地感受到。
- 没有长效化机制： 无法保证优化效果长期稳定、不出现衰退。
- 不关注开发体验： 没有认识到开发体验和用户体验的正相关性。
和其他前端优化书籍不同，这本书：
- 理念创新：专注于优化的根本目的体验优化，而非泛泛而谈、浅尝辄止的性能优化。
- 内容新颖：介绍近 5 年新涌现的优化解决方案，不讲陈词滥调。
- 理论与实践相结合：深入讲解原理，同时配套6000+行源码，详细介绍实践方案，授人以渔。
- 数据驱动：关注优化效果的量化评估，通过众多具体案例讲解如何用数据图表说话，例如：
- 构建耗时优化效果分析表：
对比项 / npm run start耗时（单位：毫秒ms） | 优化前 | 优化后 | 差异 |
|---|---|---|---|
| 平均值 | 6113.9 | 3468.3 | -2645.6 ms (-43%) |
| 中位数 | 6186.5 | 3385.5 | -2801 ms (-45%) |
| 最大值 | 6379 | 3962 | -2417 ms (-38%) |
| 最小值 | 5766 | 3192 | -2574 ms (-45%) |
web-vitals用户体验指标评分可视化图：
这本书荟萃了作者 6 年来的优化实践经验和6000+行配套源码，致力于帮助读者形成体验优化的新理念，掌握体验优化的全过程方法论，有效优化用户体验和开发体验。
进而为前端项目带来更多用户、更高营收，帮读者朋友获得更高绩效、更多升职加薪机会，爱上体验优化。
课程目录
1、你做的前端优化都错了-数据驱动、指标先行
2、前端优化数据量化必备神器-用户体验数据收集与可视化
3、光速入门Performance API
4、2行代码让JS加载耗时减少67%-资源优先级提示
5、CDN最佳实践：让CDN流量节省10%
6、CDN最佳实践：验证，量化与评估
7、超简单的代码模块懒加载：让JS加载体积减少13%
8、超简单的代码模块懒加载：懒加载常见问题解决方案
9、代码分割最佳实践：细粒度代码分割(Granular Code Split)
10、代码分割最佳实践：应用改造示例
11、前端渲染进化史：用SSR让首次内容绘制耗时（FCP）降低72%
12、前端渲染进化史：SSR进阶优化
13、图片加载体积减少20%-自适应选择最优图片格式
14、GIF体积减少80%-GIF图片优化
15、万物皆可懒加载-3类通用资源懒加载实现方案
16、万物皆可懒加载-通用资源懒加载工具库
17、打包耗时减少43%-现代构建工具的魔力
18、CSS开发体验优化-6种方案解决CSS痛点
19、用自动化优化开发体验
20、用制度优化开发体验
讲师介绍
- 少游_JuniorTour ：资深前端工程师、优化爱好者（GitHub: JuniorTour）
- 6年优化经验，爱好优化前端项目，实践经验丰富，致力于传播体验优化的新理念。是 Vue.js、Next.js、Ant Desgin、Babel 等开源项目的贡献者。