【译】前端性能优化检查表 2021 TOC 翻译

简单对一篇完整的检查表目录做一个翻译，极力推荐阅读原文，文中也提到了大量的有关性能优化策略和方法的关键字和链接，方便查询。

准备计划和指标

• 建立性能文化氛围（让更多人意识到性能的重要性）
• 目标：比最快的竞争对手至少快 20%
• 选择正确的指标（选择正确的指标，不是所有指标都重要）
• 在能代表大多数用户群体的设备上收集数据（保证准确地数据收集）
• 为测试环境准备“干净的”和“符合真实用户的”相关的配置
• 与身边人分享性能指标（确保团队每个人都认可）

设定实际目标

• 响应时间在 100ms，60fps
• 3G 网络下的 FID<100ms，TTI<5​​s，速度索引<3s，关键文件大小预算<170KB（已压缩）

定义环境

• 选择并配置好项目中的构建工具
• 默认使用渐进增强
• 选择良好的性能基准
• 仔细评估框架和依赖（不是每个项目或者页面都需要笨重的框架和大量的依赖库）
• 考虑使用 PRPL 模式和应用程序外壳体系的结构
• 检查 API 是否存在优化空间（比如 GraghQL）
• 框架选择，Google AMP 还是 Facebook 的 Instant Articles？
• 合理运用 CDN

资源优化

• 利用 Brotli 进行纯文本压缩（你可能总听到 gzip，brotli 是 2015 年 Google 提出的无损压缩的格式）
• 使用响应式图片以及 webp
• 图片是否可以再进一步优化？
• 视频是否可以进行适当优化？
• 网络字体是否经过优化？（适当删除和裁切可以减小加载体积）

构建优化

• 设置优先事项
• 在生产环境中使用原生 JavaScript 模块
• 合理使用 tree-shaking, scope hoisting, code-splitting
• 考虑将一些复杂繁重的 js 放在 Web Worker （预加载数据以及 PWA）
• 考虑将一些复杂的计算逻辑放在 WebAssembly 中
• 是否正在使用提前编译器？
• 对于旧版浏览器仅提供旧版代码
• 对于 JavaScript 使用模块还是非模块模式？
• 通过增量解耦识别并重写旧代码
• 识别并且删除没有用到的代码（代码覆盖率，Chrome 工具）
• 缩减 JavaScript Bundle 大小
• 对于 JavaScript Chunks 是否使用预测性的预读取（prefetch）
• 针对 JavaScript 引擎有针对性的优化
• CSR 还是 SSR？都要！
• 使用依靠自建的 lib 资源库（安全、可控）
• 限制第三方脚本影响
• 设置正确的 HTTP 缓存头（检查 expires，max-age，cache-control）

Delivery Optimizations

• 是否异步加载了所有的异步库？
• 使用 IntersectionObserver 和优先级提示来延迟加载体积大的组件模块
• 逐步加载图像（渐进式图像加载，由模糊到清晰）
• 优先加载基础且重要的 CSS 资源
• 尝试重新组合 CSS 规则
• 是否对信息流有响应？
• 考虑使你的组件具有连接意识（公用和复用数据）
• 考虑使你的组件设备了解内存占用
• 利用 dns-prefetch 加快交付速度
• 善用 service workers 来缓存和网络容灾
• 是否正在 CDN/Edge 上使用 service worker，比如 A/B Test？
• 优化渲染性能
• 是否优化了渲染体验
• 是否有效阻止了重排和重绘？

网络和 HTTP/2

• 是否开启 OCSP stapling
• 是否已采用 IPV6
• 确保所有资源请求都是经过 HTTP/2
• 正确部署 HTTP/2
• 确保服务器和 CDN 都已支持 HTTP/2
• 支持 QUIC 的 HTTP（HTTP/3）
• 是否采用 HPACK 压缩？
• 确保服务器安全性（HTTPS 等）

测试与监控

• 是否有话了审计工作流程（加强 CI 自动化）
• 是否在代理浏览器和旧版浏览器上进行测试？
• 是否测试了对可访问性的影响？
• 是否设置了持续监控

欢迎访问BLOG beanlee.github.io/posts/fe-pe…

原文地址 www.smashingmagazine.com/2020/01/fro…