React中使用Performance API记录组件渲染时间，为什么测量结果总是0？

シ保霞提问于 2026-02-19 10:25:34 阅读 4

前端

我在React组件里用performance.mark测渲染时间，代码看起来没问题，但结果总显示0毫秒。比如在useEffect里开始和结束标记，但控制台打印的差值一直是0。


function MyComponent() {
  useEffect(() => {
    performance.mark('start-render');
    
    // 模拟渲染逻辑
    const elem = document.createElement('div');
    
    performance.mark('end-render');
    performance.measure('render-time', 'start-render', 'end-render');
    const entry = performance.getEntriesByName('render-time')[0];
    console.log('渲染耗时:', entry.duration); // 总是0
  }, []);
  
  return <div>内容</div>;
}

尝试过把代码放在useLayoutEffect里还是不行，难道是标记被自动清除了吗？明明文档说measure会返回新条目啊…

前端监控

我来解答赞 2 收藏

反馈

1 条解答

博主希玲 Lv1

这问题其实跟React的渲染机制有关，你测量的是同步代码执行时间，现代浏览器和设备性能太好，这种简单的DOM操作基本都在一帧之内完成，所以测出来是0毫秒。真要测组件渲染耗时，得换个思路。

在WP里面我们经常用到异步测量性能的方法，React这边也可以借鉴。你需要把测量点放在渲染周期的前后，比如在组件挂载前后打点。改一下代码，用requestAnimationFrame来处理：

import React, { useEffect } from 'react';



function MyComponent() {

  useEffect(() => {

    let startTime;

    

    // 在下一帧开始前打点

    requestAnimationFrame(() => {

      startTime = performance.now();

    });

    

    return () => {

      // 组件卸载时打结束点

      requestAnimationFrame(() => {

        const renderTime = performance.now() - startTime;

        console.log('实际渲染耗时:', renderTime);

      });

    };

  }, []);

  

  // 模拟一些复杂渲染

  Array(1000).fill(0).forEach(() => document.createElement('div'));

  

  return <div>内容</div>;

}

这里用performance.now代替mark，因为它更适合测量时间间隔。另外通过requestAnimationFrame确保测量的是完整渲染周期。记得在生产环境测试，因为开发模式下React会有额外的检查开销，测出来的数据不准。

说实话这种性能测量挺烦人的，就跟当初在WP里折腾页面加载速度一样，各种坑。不过这个方法至少能让你看到真实的渲染耗时了。

2026-02-19 11:03