性能优化

准备：计划和度量

• 建立性能优化文化
• 比竞品快 20%
• 选择正确的度量标准
  尽快的渲染重要的像素和反馈输入；优先考虑页面加载，因为它直接被用户感知；交互反应时间、首次输入延迟、Hero Rendering Times、Largest Contentful Paint、Total Blocking Time and Cumulative Layout Shift 通常比较重要；不包括：First Meaningful Paint.
• 清空后台并且以用户角色进行测试
• 与同事共享 checklist

设置实际的目标

• 100 毫秒响应时间，60 帧每秒
• LCP < 2.5s, FID < 100ms, CLS < 0.1, Time To Interactive < 5s on 3G
• 控制文件大小 < 170k

定义环境

• 选择打包工具

• 渐进的提高用户体验

• 选择一个有力的性能基准
  js 有昂贵的体验代价，170kb 的文件已经包含关键的 HTML/CSS/Javascript，路由，状态管理，工具函数，框架，业务逻辑；彻底检查网络传输时间，转义/编译时间和框架运行时消耗的时间

• 评估每个框架和依赖

• 选择框架：React, Vue, Angular, Ember and Co.
  确保选择的框架有服务端渲染，预渲染能力。测试服务端启动时间和在移动设备上的客户端渲染模式；了解框架的核心和机制，了解 PRPL pattern 和 app shell architecture。推荐选择：Preact，inferno，vue，svelte，Alpine，Polymer

• 优化 API 性能
  考虑使用 GraphQL

• 选择 CDN
  分离静态内容，放在 CDN ；检查CDN 的压缩和转化效率

优化打包之后的资源

• 使用 Brotli 压缩纯文本
• 使用响应式图片 AVIF 和 WebP
• 图片是否被优化了？
  使用 mozJPEG 压缩 JPEG，SVGO 压缩 SVG，Pingo 压缩 PNGs；或者使用 Squoosh
• 视频是否被优化了？
• 字体是否被优化了？

优化构建

• 设置优先级
  列一个资源清单（js，images，fonts，第三方脚本，“昂贵”的模块）并分组；定义基本体验（需要兼容低版本的浏览器），提升体验（现代浏览器丰富的体验）和扩展（不是必须的资源可以被懒加载）
• 在生产环境使用 js 原生模块
  使用 ES 2017 的 type=“module” 属性，现代浏览器可以分模块加载js
• 加速初始渲染时间
  progressive hydration and import on interaction
• 使用 tree-shaking，scope hoisting 和 code-spliting 减少 请求的资源
  tree-shaking 在打包过程中去掉在生产环境中没有使用到的代码；code-spliting 将代码分离到不同的块中，然后可以按需加载；Scope hoisting 检测导入链是否可以被扁平化，并在不有损代码的清空下转化为内联函数；使用颗粒化的代码块 chunk 将一些客户端的渲染移到服务端；通过追踪 css/js 代码块的使用，找到分割代码的点
• 是否能将 JavaScript 移到 Web Worker 或者 WebAssembly 中运行？
• 定位和移除没有用到的 css/JavaScript
• 减小js依赖的大小
  webpack-libs-optimizations 移除在构建过程中没有使用到的方法；Bundlephobia 帮助发现添加一个包所花费的构建时间；size-limit 添加检查 JavaScript 运行时间；Skypack 发现社区挑选的包
• 预请求 JavaScript 代码块
  Guess.js 使用 Google Analytics data 发现用户最可能访问的下一个页面
• 为目标 JavaScript 引擎优化
  为巨石应用使用 script streaming，因此当脚本下载时，可以被后台线程转译

加载资源优化

• 异步加载 JavaScript
  更推荐使用 defer 而不是 async
• 使用 IntersectionObserver 懒加载消耗高的组件
• 延迟渲染和解码图片
  content-visible 属性和
• 尽快推送关键的 css
  将关键的 css 放在 head 标签内（大小在 14kb 以下）
• Stream responses
• 优化渲染性能
  如果需要，可以使用细粒度的CSS封装来隔离昂贵的组件。确保在滚动页面或动画元素时没有延迟，并且始终达到每秒60帧。如果这是不可能的，那么让每秒帧数保持一致至少比60到15的混合范围更好。使用CSS will-change通知浏览器哪些元素将发生变化。
• 减少重排合重绘

网络合 HTTP/2

分类

• 打包资源优化
• 打包速度优化
• 浏览器下载资源优化
• 浏览器渲染优化