本文档根据 Front-End Checklist 项目，全面概述了前端 Web 开发的性能优化技术。它涵盖了通过性能改进来提高网站加载速度、资源优化和用户体验的最佳实践。有关 JavaScript 的具体性能考虑，请参阅 JavaScript，有关图片优化的具体说明，请参阅 Images and Media。
前端开发的性能优化涉及多种技术，旨在最大限度地减少页面加载时间、减少资源使用并确保流畅的用户体验。Front-End Checklist 根据这些技术的重要性和影响对其进行了分类。
来源: README.md620-699
Front-End Checklist 定义了网站应努力实现的一些具体性能指标。
| 指标 | 目标值 | 优先级 |
|---|---|---|
| 首次有意义绘制 (First Meaningful Paint) | 1秒以内 | 中等 |
| 交互时间 (Time To Interactive) | 平均设备下 5 秒以内 重复访问下 2 秒以内 | 中等 |
| 关键文件大小 | 压缩后 170KB 以内 | 中等 |
这些指标有助于确保网站加载迅速并响应用户交互，从而提高用户体验和参与度。
来源: README.md624-629
适当的 HTML 优化可以提高加载时间和渲染性能。
HTML 最小化是指在不影响功能的情况下，从 HTML 代码中移除不必要的字符（如空格、注释等）。这可以减小文件大小，提高下载速度。
来源: README.md635-636
CSS 优化技术侧重于提高性能，包括：
将多个 CSS 文件合并为一个文件可以减少 HTTP 请求，而最小化可以减小文件大小。
| 技术 | 目的 | 优先级 |
|---|---|---|
| 连接 | 将 CSS 文件合并为一个（HTTP/2 无需此操作） | 高 |
| 代码压缩 | 从 CSS 中删除不必要的字符 | 高 |
| 非阻塞加载 | 防止渲染阻塞 CSS | 中等 |
| 删除未使用的 CSS | 消除未使用的 CSS 规则 | 低 |
关键 CSS 涉及识别并内联“首屏”（above-the-fold）内容所需的 CSS。这使得页面能够快速渲染，同时加载其余 CSS。
来源: README.md238-240 README.md410-425
优化 JavaScript 对于提高页面交互性和加载时间至关重要。
| 技术 | 描述 | 优先级 |
|---|---|---|
| 连接 | 合并 JavaScript 文件 | 高 |
| 代码压缩 | 通过移除不必要的字符来最小化文件大小 | 高 |
| Async/Defer 加载 | 加载脚本而不阻塞页面渲染 | 中等 |
| 合适大小的库 | 仅使用必要的库和方法 | 中等 |
来源: README.md513-540
优化资源的加载方式可以显著提高感知到的和实际的页面加载时间。
资源提示允许浏览器为将来的请求做好准备，从而优化加载过程。
| 资源提示 | HTML 实现 | 目的 | 优先级 |
|---|---|---|---|
| DNS 预取 (DNS Prefetch) | <link rel="dns-prefetch" href="https://example.com" /> | 提前解析 DNS | 低 |
| 预连接 (Preconnect) | <link rel="preconnect" href="https://example.com" /> | 建立早期连接 | 低 |
| 预取 (Prefetch) | <link rel="prefetch" href="image.png" /> | 请求未来资源 | 低 |
| 预加载 (Preload) | <link rel="preload" href="app.js" /> | 提前请求关键资源 | 低 |
来源: README.md656-686
延迟加载 (Lazy loading) 是一种将非关键资源推迟到需要时再加载的技术，可以提高初始页面加载速度。
来源: README.md637-638 README.md500-502
优化 Cookie 可以提高请求性能并减少带宽使用。
来源: README.md640-646
第三方组件，如社交分享按钮、分析工具和嵌入式内容，可能对性能产生重大影响。
来源: README.md647-652
定期进行性能测试对于确保优化工作的有效性至关重要。
| 工具 | 目的 | URL |
|---|---|---|
| Google PageSpeed Insights | 页面性能分析和建议 | https://developers.google.com/speed/pagespeed/insights/ |
| WebPageTest | 详细的性能分析和瀑布图 | https://www.webpagetest.org/ |
| GTmetrix | 性能分析和建议 | https://gtmetrix.com/ |
| Pingdom | 网站速度和性能分析 | https://tools.pingdom.com/ |
| Speedrank | 网站性能优化 | https://speedrank.app/ |
来源: README.md689-699
全面的性能优化方法将所有技术整合到一个连贯的工作流中。
来源: README.md620-699
Front-End Checklist 中的性能优化部分提供了一种结构化的方法，以确保网站符合现代性能标准。它旨在作为更广泛的开发和质量保证工作流的一部分。
该清单格式（包含优先级指示器）可帮助开发团队首先关注影响最大的优化，同时全面概述所有潜在的性能改进。