准备：计划和度量

• [ ] 建立团队关注性能的文化氛围

• [ ] 设定目标：比最快的竞争对手再提升 20%

• [ ] 选择正确的度量指标

• [ ] 通过设置无干扰和真实用户场景两种配置环境分别去测试

• [ ] 团队统一性能检测清单

设置现实改进目标

• [ ] 100ms 响应时长，60 帧率/秒

• [ ] FID < 100ms，响应时长 < 5s

• [ ] 关键文件大小 < 170KB

定义环境

• [ ] 选择打包和构建工具

• [ ] 默认采用渐进式增强

• [ ] 选择一个严格的性能基准

• [ ] 评估每个框架和依赖

• [ ] 理性选择框架：React、Vue、Angular 等

• [ ] 优化网络 API 请求时长

• [ ] AMP?

• [ ] 理智选择 CDN

静态资源优化

• [ ] 使用 Brotli 文本压缩

• [ ] 使用响应式图片和 webP

• [ ] 合理压缩图片

• [ ] 合理压缩视频

• [ ] 合理压缩字体

构建优化

• [ ] 设置正确的优先级

• [ ] 在生产环境使用原生 JavaScript mudule

• [ ] 减少 JavaScript 初始化执行时间

• [ ] 使用 tree-shaking，作用域提升，code-splitting 减少文件大小

• [ ] 考虑使用 Web Worker 或 WebAssembly 减轻 JavaScript 性能瓶颈

• [ ] 不同浏览器部署不同代码

• [ ] 通过增量式解耦重构代码

• [ ] 删减 JavaScript 依赖文件大小

• [ ] 考虑采用预测性预加载 JavaScript 片段？

• [ ] 针对不同 JavaScript 引擎做优化

• [ ] 衔接客户端渲染和服务端渲染

• [ ] 考虑微优化和渐进式启动

• [ ] 使用自主部署第三方静态资源

• [ ] 限制第三方脚本影响

• [ ] 设置合适的 HTTP 缓存属性

加载优化

• [ ] 异步加载 JavaScript

• [ ] 使用 IntersectionObserver 懒加载较大组件

• [ ] 优先加载关键 CSS

• [ ] 实验式重组 CSS 规则集

• [ ] 流式响应

• [ ] 考虑使用 Network Infomation API 和 Device Memory API 优化

• [ ] 使用 dns-prefetch、preconnect、prefetch、preload、prerender 等加速加载

• [ ] 使用 Server Worker 缓存和存储离线资源

• [ ] 使用 CDN 或 Edge 的 Server Worker

• [ ] 优化渲染性能

• [ ] 骨架屏

• [ ] 避免布局重绘

网络和 HTTP/2

• [ ] OCSP 是否开启

• [ ] 采用 IPv6？

• [ ] 使用 BBR？

• [ ] HTTP/2

• [ ] QUIC 和 HTTP/3

• [ ] HPACK 压缩

• [ ] 服务器安全

测试和监控

• [ ] 监控 mixed-content 警告

• [ ] Lighthouse 评分

• [ ] 浏览器兼容

• [ ] 无障碍测试

• [ ] 线上持续监控

（待完善和补充）