如何做性能优化

H5 性能优化我通常分四步走：

1. 网络层：通过 DNS 预解析、CDN 加速、HTTP 缓存和代码分割减少首屏加载时间；
2. 渲染层：使用 骨架屏 提升感知速度，虚拟滚动解决长列表卡顿，CSS GPU 加速保证 60fps 流畅度；
3. 运行时：防抖节流优化事件处理，Web Worker 处理复杂计算，避免内存泄漏；
4. 构建层：Tree Shaking、Brotli 压缩和资源预加载（preload/prefetch）进一步优化包体积和加载优先级。

最终目标是将 FCP（首次内容绘制） 控制在 1.8 秒内，TTI（可交互时间） 控制在 3 秒内。

首屏优化

1. 网络层：通过 Critical CSS 内联 消除渲染阻塞，Preload 预加载首图，Brotli 压缩减少 25% 体积；
2. 渲染层：JS 全量使用 Defer 异步加载，配合 SSR 直出保证 FCP < 1s；
3. 感知层：内联首屏数据避免接口请求，配合 骨架屏提升用户等待体验；
4. 监控：使用 Lighthouse CI 和 Web Vitals 监控 LCP/FID/CLS，确保首屏时间稳定在 1.2s 以内。

性能优化

• 代码层面

  • 代码压缩：去除代码中的多余空格、注释等，缩减代码体积，加快加载速度。开发工具通常具备代码压缩功能，在上传代码时可自动开启。
  • 分包加载：将小程序代码分割成多个包，按需加载。这样能减少首次加载的代码量，提高启动速度。在 app.json 里配置 subPackages 来实现分包加载。
  • 避免全局变量滥用：全局变量会一直占用内存，过多使用会导致内存泄漏，影响性能。应尽量减少全局变量的使用，必要时在使用完后及时释放。

• 资源层面

  • 图片优化：
    • 选用合适的图片格式，如 JPEG 适合色彩丰富的图片，PNG 适合有透明效果的图片。
    • 对图片进行压缩处理，可使用专业的图片压缩工具，减小图片体积。
    • 采用图片懒加载技术，只有当图片进入可视区域时才进行加载。
  • 合理使用本地资源：对于一些不常变化的资源，如字体文件、图标等，可将其存储在本地，减少网络请求。

• 渲染层面

  • 减少 DOM 操作：频繁的 DOM 操作会导致页面重排和重绘，影响渲染性能。尽量批量进行 DOM 操作，避免在循环中频繁操作 DOM。
  • 优化数据绑定：避免在模板中进行复杂的计算和逻辑处理，将这些操作放在 JavaScript 中完成，然后将结果绑定到模板上。
  • 使用自定义组件：将页面中复用性高的部分封装成自定义组件，减少代码冗余，提高渲染效率。

• 网络层面

  • 优化请求次数：合并多个小的请求为一个大的请求，减少网络请求次数。例如，将多个接口的数据合并到一个接口中返回。
  • 设置合理的缓存策略：对于一些不经常变化的数据，如配置信息、字典数据等，可设置缓存，减少重复请求。使用 wx.setStorage 和 wx.getStorage API 进行数据缓存。
  • 使用 CDN：将静态资源（如图片、CSS、JavaScript 文件等）存储在 CDN 上，利用 CDN 的分布式节点，加快资源的加载速度。

性能指标

核心指标

• LCP：最大内容绘制，记录最大文本块/图片渲染时间，反映关键加载路径性能。
• INP：交互到下一次渲染的延迟，监测 click/keypress 后的主线程阻塞（长任务未切割），衡量交互丝滑度。
• CLS：累积布局偏移，页面生命周期内布局变化得分总和，反映重排/重绘稳定性，易优化至 0。

其他指标

• FCP (First Contentful Paint)：首次内容绘制，可通过 res.flush 发送无意义像素作弊。
• TTFB (Time to First Byte)：首字节响应时间，易受网络策略影响。
• FMP (First Meaningful Paint)：首次有效绘制，已被 LCP 替代。
• TTI (Time to Interactive)：可交互时间，主资源加载完成且能快速响应输入。