问题定义
本笔记旨在总结前端性能优化的常用方法，提升 Web 应用的加载速度、渲染性能和用户体验。
步骤与流程
1. 加载速度优化
核心思路：减小资源体积，减少带宽占用
- 减少 HTTP 请求：
- 合并 CSS 和 JavaScript 文件。
- 使用 CSS Sprites。
- 使用 Data URI。
- 适用场景： 适用于 HTTP/1.1 协议，HTTP/2 协议下多路复用技术可以减少 HTTP 请求的开销。
- 注意事项： 合并文件需要注意文件大小和依赖关系。
- 压缩资源：
- 压缩 HTML、CSS 和 JavaScript 文件。
- 压缩图片和视频。
- 字体子集化👉记录：字体子集化
- 适用场景： 适用于所有 Web 应用。
- 注意事项： 压缩比例过高可能会影响资源质量。
- 使用 CDN：
- 将静态资源部署到 CDN 上，加速用户访问。
- 适用场景： 适用于静态资源较多的 Web 应用。
- 注意事项： 选择合适的 CDN 服务商，并配置正确的缓存策略。
- 启用 Gzip 压缩：
- 对传输的资源进行 Gzip 压缩，减少传输大小。
- 适用场景： 适用于所有 Web 应用。
- 注意事项： 需要服务器和浏览器都支持 Gzip 压缩。
- 优化图片：
- 选择合适的图片格式（JPEG、PNG、WebP）。
- 压缩图片大小。
- 使用懒加载。
- 适用场景： 适用于包含大量图片的 Web 应用。
- 注意事项： 懒加载需要注意首屏图片的加载。
- 代码分割：
- 将代码分割成多个小块，按需加载。
- 适用场景： 适用于大型单页应用（SPA）。
- 注意事项： 需要合理划分代码块，避免过度分割。
- 预加载：
- 预加载关键资源，提高页面加载速度。
- 适用场景： 适用于需要快速加载的关键资源。
- 注意事项： 预加载可能会增加带宽占用。
2. 渲染性能优化
核心思路：尽量避免阻塞渲染流程
- 减少 DOM 操作：
- 避免频繁操作 DOM 元素。
- 使用 DocumentFragment。
- 适用场景： 适用于需要频繁更新 DOM 元素的 Web 应用。
- 注意事项： 尽量批量更新 DOM 元素。
- 优化 CSS 选择器：
- 避免使用复杂的 CSS 选择器。
- 使用 BEM 命名规范。
- 适用场景： 适用于大型 CSS 项目。
- 注意事项： 保持 CSS 选择器的简洁和可维护性。
- 避免重绘和重排：
- 尽量减少引起重绘和重排的操作。
- 使用 will-change 属性。
- 适用场景： 适用于需要频繁更新样式的 Web 应用。
- 注意事项： 避免过度使用 will-change 属性。
- 使用 Web Workers：
- 将耗时的计算任务放到 Web Workers 中执行，避免阻塞主线程。
- 适用场景： 适用于需要执行大量计算任务的 Web 应用。
- 注意事项： Web Workers 无法直接操作 DOM 元素。
- 优化 JavaScript 代码：
- 避免使用耗时的 JavaScript 代码。
- 使用 requestAnimationFrame。
- 适用场景： 适用于需要执行复杂 JavaScript 代码的 Web 应用。
- 注意事项： 避免在主线程中执行耗时的 JavaScript 代码。
3. 缓存优化
核心思路：利用缓存进行资源复用
- 浏览器缓存：
- 设置合适的 HTTP 缓存头。
- 使用 Service Worker API。
- 适用场景： 适用于所有 Web 应用。
- 注意事项： 需要合理配置 HTTP 缓存头和 Service Worker。
- CDN 缓存：
- 配置 CDN 缓存策略。
- 适用场景： 适用于使用 CDN 的 Web 应用。
- 注意事项： 需要合理配置 CDN 缓存策略。
- 服务器缓存：
- 使用 Redis、Memcached 等缓存服务器。
- 适用场景： 适用于需要频繁访问数据库的 Web 应用。
- 注意事项： 需要合理配置缓存服务器。
注意事项
- 性能优化是一个持续的过程： 需要不断地学习和实践。
- 性能优化需要结合实际情况： 不同的 Web 应用有不同的性能瓶颈。
- 性能优化需要权衡利弊： 某些优化方法可能会带来副作用。