前端性能优化清单

一、做好准备：计划和指标

1. 建立性能指标

使开发/设计和营销团队之间具有一致性。

2. 团队目标:至少要比你最快的竞争对手还快 20%

1. 除了性能预算之外，为最有利的关键客户任务设置和讨论可接受的关键行为的时间阈值，
有助于支持或避免了在优化路上的性能讨论。确保增加资源和功能的额外成本是可预见和可理解的。
2. 为项目制定一个加载顺序

3. 选择正确的指标

根据项目不同选择指标的优先度也不同

• 首次有效渲染（FMP，是指主要内容出现在页面上所需的时间）
• 关键渲染时间（页面最重要部分渲染完成所需的时间）
• 可交互时间（TTI，是指页面布局已经稳定，关键的页面字体已经可见，主进程可以足够的处理用户的输入 —— 基本的时间标记是，用户可以在 UI 上进行点击和交互）
• 输入响应 接口响应用户操作所需的时间
• 速度指标 测量填充页面内容的速度。 分数越低越好
• 自定义指标 由你的业务需求和客户体验来决定

4. 借助其他具代表性的性能监测工具完善自己项目

5. 团队之间分享性能优化清单计划

6、制定现实的目标

• 60 fps，100 毫秒的响应时间，超过这时间会让用户感觉应用程序很慢
• 重要文件的大小预算小于 170kb，并且关键信息最好在一秒内能得到

7. 选择适合的构建工具

8. 渐进式增强，自下往上

9. 建立全面的性能测试基准

10. 根据项目的不同选择适合的CDN

二、构建优化

1. 分清轻重缓急，选择适当的加载顺序

2. 保持项目初始化加载较少JavaScript

3. 使用预编译器来减轻从客户端到服务端的渲染的开销，快速输出有用的结果

4. 选择适当的插件能让大大减轻JavaScript的负载

5. 根据用户群体使用的浏览器，研究他们的JavaScript引擎并且针对性优化

6. 渐进引导，使用服务器端呈现获得第一个快速的有意义的绘排，而且还要包含一些最小必要的 JavaScript 来保持实时交互来接近第一次的绘排，即需加载用户的必需交互部分，借此引导用户操作。

7. 防止项目受到第三方脚本的影响

• 通过间隔下载资源来使用 service workers，如果在特定的时间间隔内资源没有响应，返回一个空的响应告知浏览器执行解析页面
• 建立一个 内容安全策略（CSP） 来限制第三方脚本的影响，比如：不允许下载音频和视频。最好的选择是通过iframe嵌入脚本以致于脚本运行在 iframe 环境中，因此如果没有接入页面 DOM 的权限，在你的域下不能运行任何代码。Iframe 可以 使用 sandbox 属性进一步限制，因此你可以禁止 iframe 的任何功能，比如阻止脚本运行，阻止警告、表单提交、插件、访问顶部导航等等。

8. 合理设置HTTP cache 头部

9. 静态资源优化

10. 异步加载JavaScript

11. 懒加载资源开销很大的代码，可以使用 Intersection Observer API(提供了一种方法异步观察目标元素与 祖先元素或顶层文档的视口。基本上，你需要创建一个新的 IntersectionObserver 对象，它接收一个回调函数和一组选项。 然后我们添加一个目标来观察。)

12. 优先加载关键的 CSS

13. 使用流(streams)相应请求，streams 经常被遗忘和忽略，它提供了异步读取或写入数据块的接口，在任何给定的时间内，只有一部分数据可能在内存中可用。 基本上，只要第一个数据块可用，它们就允许原始请求的页面开始处理响应，并使用针对流进行优化的解析器逐步显示内容。

14. 使用资源提示提高性能

• dns-prefetch （在后台执行 DNS 查询），preconnect （告诉浏览器在后台进行连接握手（DNS, TCP, TLS）），prefetch (告诉浏览器请求一个资源), preload (预先获取资源而不执行他们)

15. 项目迁移到 HTTPS，然后打开 HTTP/2，启动 OCSP stapling(加速 TLS 握手)，采用IPv6,使用HPACK 压缩工具

16. 开启性能持续监控