📚 课程介绍
本课程深入探讨前端性能优化,涵盖前沿解决方案,包括资源加载、渲染优化、构建优化等方面,旨在提升前端开发效率和用户体验。
📋 学习前提
1. HTML/CSS基础(网页结构和样式语言) 2. JavaScript基础(网页交互编程语言) 3. 熟悉前端工程化工具(如Webpack)
📖 课程目录
第1章 课程介绍
1-1 课程导学
第2章 性能优化的指标和工具
2-1 为什么要进行Web性能优化
2-2 性能指标和优化目标
2-3 RAIL测量模型
2-4 使用WebPageTest评估Web网站性能
2-5 使用LightHouse分析性能
2-6 使用Chrome DevTools分析性能
2-7 常用的性能测量APIs
第3章 渲染优化
3-1 浏览器渲染原理和关键渲染路径
3-2 回流与重绘, 如何避免布局抖动
3-3 使用FastDom
3-4 复合线程与图层
3-5 避免重绘
3-6 高频事件防抖
3-7 React时间调度实现
第4章 代码优化
4-1 JS开销和如何缩短解析时间
4-2 配合V8 有效优化代码
4-3 函数优化
4-4 对象优化
4-5 HTML优化
4-6 CSS对性能的影响
第5章 资源优化
5-1 资源的压缩与合并
5-2 图片格式优化
5-3 图片加载优化
5-4 字体优化
第6章 构建优化
6-1 webpack的优化配置
6-2 webpack的依赖优化
6-3 React按需加载的实现方式
6-4 手把手教你做webpack的资源压缩
6-5 基于webpack的持久化缓存
6-6 基于webpack的应用大小监测与分析
第7章 传输加载优化
7-1 启用压缩Gzip
7-2 启用Keep Alive
7-3 HTTP资源缓存
7-4 一次性理解Service workers技术,给网站提速
7-5 HTTP 2的性能提升
7-6 用流行的SSR技术给前端减负
第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 英语与工作
