如何测量和优化 React 性能

React apps tend to slow down as they grow. Components re-render unnecessarily, bundles bloat, and interactions start to lag. The results are poor Core Web Vitals (especially Interaction to Next Paint), frustrated users, and a sluggish user experience.

React 应用随着增长而变慢。组件不必要地重新渲染，bundles 膨胀，交互开始滞后。结果是糟糕的 Core Web Vitals （尤其是 Interaction to Next Paint），沮丧的用户，以及迟钝的用户体验。

While React apps are notable for performance issues, and there are now more lightweight alternatives for component-based applications (e.g., Preact, Lit, Solid, etc.), React also continues to add new performance features that expand the options for building fairly well-performing applications using this framework.

虽然 React 应用以性能问题而闻名，现在有更轻量级的组件化应用替代方案 （例如 Preact、Lit、Solid 等），但 React 也在持续添加新的性能特性，扩展了使用此框架构建性能相当不错的应用程序的选项。

In this post, we'll look into how to measure and optimize React performance.

在这篇文章中，我们将探讨如何测量和优化 React 性能。

How to Measure React Performance​

如何测量 React 性能​

Effective performance optimization starts with measurement. React provides some ways to measure application performance using browser developer tools so that you can identify performance bottlenecks and unnecessary re-renders.

有效的性能优化从测量开始。React 提供了一些使用浏览器开发者工具测量应用性能的方法，以便您可以识别性能瓶颈和不必要的重新渲染。

1. React Performance Tracks​

1. React 性能追踪​

React Performance Tracks were introduced in React 19.2. They are custom timeline entries in Chrome DevTools' Performance panel that show React-specific events alongside network requests and JavaScript execution.

React Performance Tracks 在 React 19.2 中引入。它们是 Chrome DevTools 的 性能 面板中的自定义时间线条目，显示 React 特定事件以及网络请求和 JavaScript 执行。

Essentially, they visualize React's internal priority system alongside component render durations and server activity, providing a comprehensive view of React's concurrent rendering functionality.

本质上，它们将 React 的内部优先级系统与组件渲染持续时间和服务器活动可视化在一起，提供对 React 的 concurrent rendering functionality 的全面视图。

React Performance Tracks appear in three distinct sections within the Performance panel:

React 性能追踪会出现在 性能 面板中的三个不同部分：

• Scheduler track, which ...