[448] 前端性能优化，掌握行业实用、专业、前沿的解决方案 - 只要比别人掌握更多的性能优化方案，你就比别人更有竞争力

网盘链接：

1. 课程介绍

• 1-1 课程导学 【课程背景，大纲速览】

2. 性能优化的指标和工具 (告别前端小白，成为大神的必经之路)

• 2-1 为什么要进行Web性能优化【企业刚需】
• 2-2 性能指标和优化目标【了解行业标准】
• 2-3 RAIL测量模型【黄金指南】
• 2-4 使用WebPageTest评估Web网站性能【快捷好用的在线分析工具】
• 2-5 【讨论题】谈谈对性能优化的一些想法
• 2-6 使用LightHouse分析性能【一站式全面呈现性能指标】
• 2-7 使用Chrome DevTools分析性能【最大法宝】
• 2-8 常用的性能测量APIs【不可不知，打开精细化、自定义测量的大门】

3. 渲染优化 (与浏览器为友，共进退)

• 3-1 浏览器渲染原理和关键渲染路径【大厂前端面试必考】
• 3-2 回流与重绘, 如何避免布局抖动
• 3-3 使用FastDom【防止布局抖动的利器】
• 3-4 复合线程与图层【深入渲染流水线的最后一站】
• 3-5 避免重绘【必学，加速页面呈现】
• 3-6 高频事件防抖【解救页面卡顿的秘药】
• 3-7 React时间调度实现【中高级前端需要了解的React调度原理】

4. 代码优化 (快来看看怎样写出真正高性能的代码)

• 4-1 JS开销和如何缩短解析时间【为什么我的JS运行慢】
• 4-2 配合V8 有效优化代码【路走对了才能快】
• 4-3 函数优化【必会】
• 4-4 对象优化【JS对象避坑地图】
• 4-5 HTML优化【必会】
• 4-6 CSS对性能的影响 【必会】

5. 资源优化 (经典性能优化解决方案)

• 5-1 资源的压缩与合并【见效最明显的优化方法】
• 5-2 图片格式优化【多种图片格式，哪种最合适】
• 5-3 图片加载优化【突破大型网站图片加载的瓶颈】
• 5-4 【讨论题】大家讨论一下图片加载的优化
• 5-5 字体优化【千万不可忽略】

6. 构建优化(揭开webpack性能优化的内幕)

• 6-1 webpack的优化配置【了解这些优化配置才敢说会用webpack】
• 6-2 关于 webpack 性能优化
• 6-3 webpack的依赖优化【小改动，大作用】
• 6-4 基于webpack的代码拆分【让网站按需加载】
• 6-5 手把手教你做webpack的资源压缩
• 6-6 基于webpack的持久化缓存【大型企业级应用的必会技能】
• 6-7 基于webpack的应用大小监测与分析【webpack性能分析的法宝】
• 6-8 React按需加载的实现方式【中高级前端必会的React按需加载】

7. 传输加载优化（前沿技术解决高访问量网站性能优化问题）

• 7-1 启用压缩Gzip【必会的传输压缩方案】
• 7-2 启用Keep Alive【通过一个参数提速连接】
• 7-3 HTTP资源缓存【必会的HTTP缓存方法】
• 7-4 一次性理解Service workers技术，给网站提速
• 7-5 【讨论题】缓存方法
• 7-6 HTTP 2的性能提升
• 7-7 用流行的SSR技术给前端减负
• 7-8 【讨论题】前端渲染和服务端渲染各有利弊

8. 前沿优化解决方案

• 8-1 拯救移动端图标SVG【拯救移动端图标】
• 8-2 使用Flexbox优化布局（上）
• 8-3 使用Flexbox优化布局（下）
• 8-4 优化资源加载的顺序【给资源设置优先级】
• 8-5 预渲染页面【提前完成任务的意义】
• 8-6 Windowing提高列表性能【开源节流，用什么画什么】
• 8-7 使用骨架组件减少布局移动【论占位置的重要性】

9. 性能优化问题面试指南【能胸有成竹的一步】

• 9-1 Web加载&渲染基本原理
• 9-2 首屏加载优化
• 9-3 JavaScript 内存管理

10. 互联网外企offer与立足之道【能不能出国，就看这一章了】

• 10-1 互联网外企offer
• 10-2 英语与工作