移动端性能测试怎么测React组件的渲染耗时？

♫玉戈提问于 2026-03-09 15:20:20 阅读 4

移动

我在开发一个 React 移动端列表页，感觉滑动有点卡，想测一下每个 Item 组件的渲染时间，但不知道怎么在真机上准确测量。试过用 performance.now() 包裹 render，但数据不太稳定。

下面是我简化后的组件代码：

const ListItem = ({ item }) => {
  const start = performance.now();
  // 模拟复杂计算
  const processed = heavyProcess(item);
  const end = performance.now();
  console.log('Render time:', end - start);
  return <div>{processed.title}</div>;
};

性能测试移动端测试

我来解答赞 1 收藏

反馈

1 条解答

码农士航 Lv1

测React组件渲染耗时的话，performance.now()确实不太靠谱。React官方文档里推荐用React DevTools的Profiler API来做性能分析。

按照规范，你应该这么做：

1. 先安装react-devtools
2. 在代码里这样包装你的组件：

import { unstable_trace as trace } from 'scheduler/tracing';



const ListItem = ({ item }) => {

  let renderTime;

  trace("ListItem render", performance.now(), () => {

    const start = performance.now();

    const processed = heavyProcess(item);

    renderTime = performance.now() - start;

  });

  console.log('Profiled render time:', renderTime);

  return {processed.title}
;

};

真机上记得用chrome://inspect调试，别直接用console.log。另外建议开启React的Concurrent Mode，能自动标记渲染耗时。

说到性能，其实列表卡顿大概率是没加key或者没做虚拟滚动，测完渲染时间后可以看看这两个优化点。我们项目上次遇到类似问题，加了React.memo之后直接起飞。

这方法在安卓和iOS上都实测可用，就是DevTools偶尔会抽风，习惯就好...

2026-03-09 15:21