<think>我们正在处理一个React组件中的运行时TypeError错误，具体错误信息是： `Failed to execute 'measure' on 'Performance': '​NotFound' cannot have a negative time stamp.` ### 错误背景分析 这个错误发生在使用`performance.measure()`方法时，该方法是浏览器Performance API的一部分，用于测量两个标记（marks）之间的时间间隔。错误信息指出，尝试使用一个名为`NotFound`的标记进行测量，但该标记的时间戳为负值，这是不允许的。 ### 错误原因详解 1. **标记未定义或未正确创建** `performance.measure()`要求作为起始和结束的标记必须已经通过`performance.mark()`创建。如果标记不存在（即`NotFound`），则无法获取其时间戳，从而导致错误。 2. **标记时间戳无效** 错误信息中提到的负时间戳通常意味着： - 标记未被正确记录 - 标记在性能时间线中不存在 - 尝试在标记创建之前进行测量 3. **React组件中的常见触发场景** 在React中，此类错误通常与以下操作相关： - 在`useEffect`或生命周期方法中调用性能测量 - 异步操作中未正确等待标记创建 - 组件卸载后尝试测量 ### 数学原理说明 性能测量依赖于高精度时间戳。设： - $t_{start}$ = 起始标记的时间戳 - $t_{end}$ = 结束标记的时间戳 测量持续时间计算为： $$ \Delta t = t_{end} - t_{start} $$ 当$t_{start}$或$t_{end}$未定义时，浏览器无法执行减法运算，从而抛出`NotFound`错误。时间戳必须满足： $$ t \geq 0 \quad \text{且} \quad t \in \mathbb{R} $$ ### 解决方案 #### 步骤1: 验证标记存在性 在调用`performance.measure()`前，确认标记已创建： ```javascript // 创建标记 performance.mark('myMark_start'); // 测量前检查 if (performance.getEntriesByName('myMark_start').length > 0) { performance.measure('myMeasure', 'myMark_start'); } else { console.error('标记不存在'); } ``` #### 步骤2: 确保执行顺序 在React组件中，确保测量逻辑在标记创建之后执行： ```jsx useEffect(() => { performance.mark('component_rendered_start'); // 组件渲染后操作... // 确保在结束标记创建后才测量 performance.mark('component_rendered_end'); performance.measure('renderTime', 'component_rendered_start', 'component_rendered_end'); }, []); ``` #### 步骤3: 清理性能条目 避免内存泄漏，在组件卸载时清理标记： ```javascript useEffect(() => { return () => { performance.clearMarks('component_rendered_start'); performance.clearMarks('component_rendered_end'); performance.clearMeasures('renderTime'); }; }, []); ``` #### 步骤4: 错误边界处理 使用`try-catch`捕获潜在错误： ```javascript try { performance.measure('myMeasure', 'startMark', 'endMark'); } catch (e) { console.warn('性能测量失败:', e.message); } ``` ### 错误示例修正 **错误代码**: ```javascript // 未创建标记就直接测量 performance.measure('brokenMeasure'); ``` **修正后**: ```javascript performance.mark('fix_start'); // ...执行操作 performance.mark('fix_end'); performance.measure('fixedMeasure', 'fix_start', 'fix_end'); ``` ### 预防措施 1. **使用性能监测库** 考虑使用`react-performance`或`user-timing`等库简化操作： ```javascript import { withPerformance } from 'react-performance'; const MyComponent = () => { ... }; export default withPerformance(MyComponent); ``` 2. **开发环境检测** 在开发模式下增加标记验证： ```javascript if (process.env.NODE_ENV === 'development') { const marks = performance.getEntriesByType('mark'); console.assert(marks.includes('myMark'), '性能标记缺失'); } ``` ### 相关问题 1. 如何在React中正确使用Performance API进行渲染性能分析？ 2. 浏览器Performance API的测量误差有哪些来源？ 3. React组件卸载时如何自动清理性能标记？ 4. 如何为异步操作创建有效的性能测量点？[^1] [^1]: 参考React官方文档中关于性能监测的最佳实践 </think> ### Runtime TypeError: `Failed to execute 'measure' on 'Performance'` 错误解析 #### 错误含义与核心原因 该错误表示在调用浏览器 Performance API 的 `measure()` 方法时，指定的性能标记（mark）未找到或时间戳无效[^1]。具体表现为： 1. **标记未创建**：尝试测量未通过 `performance.mark()` 创建的标记 2. **时间戳无效**：标记的时间戳为负值（$t < 0$）或不存在 3. **生命周期问题**：在 React 组件中尝试测量已卸载组件的性能 数学表达：设 $t_{\text{start}}$ 和 $t_{\text{end}}$ 为标记时间戳，当 $t_{\text{start}} \notin \mathbb{R}^+$ 或 $t_{\text{end}} \notin \mathbb{R}^+$ 时触发错误（$\mathbb{R}^+$ 表示正实数集） #### React 中的典型触发场景 ```jsx // 错误示例：未创建标记直接测量 function ProblemComponent() { useEffect(() => { // 错误：'component_start' 标记未创建 performance.measure('renderTime', 'component_start'); }, []); return <div>...</div>; } ``` ```jsx // 错误示例：异步操作中标记失效 function AsyncComponent() { useEffect(() => { performance.mark('start'); fetchData().then(() => { // 可能组件已卸载，标记被清除 performance.measure('loadTime', 'start'); // 触发错误 }); }, []); return <div>...</div>; } ``` #### 解决方案与修正代码 ##### 1. 确保标记存在性 ```jsx useEffect(() => { // 正确创建标记 performance.mark('component_start'); // 业务逻辑... // 测量前验证标记存在 if (performance.getEntriesByName('component_start').length > 0) { performance.measure('renderTime', 'component_start'); } }, []); ``` ##### 2. 处理组件卸载场景 ```jsx useEffect(() => { performance.mark('start'); return () => { // 组件卸载时清理标记 performance.clearMarks('start'); }; }, []); const handleAction = useCallback(() => { // 测量前检查组件是否仍挂载 if (isMountedRef.current) { performance.measure('actionTime', 'start'); } }, []); ``` ##### 3. 使用性能监控库（推荐） ```bash npm install react-performance ``` ```jsx import { withPerformance } from 'react-performance'; const MyComponent = () => { // 自动处理标记生命周期 return <div>...</div>; }; export default withPerformance(MyComponent, { marks: ['mount', 'update'], // 自动生成标记 measures: ['renderTime'] // 自动生成测量 }); ``` #### 错误预防措施 1. **标记命名规范**：使用唯一标记名（如 `componentName_start`） 2. **时间戳验证**： ```javascript const mark = performance.getEntriesByName('myMark')[0]; if (mark && mark.startTime >= 0) { performance.measure('validMeasure', 'myMark'); } ``` 3. **错误边界处理**： ```javascript try { performance.measure('safeMeasure', 'existingMark'); } catch (e) { console.warn('性能测量失败:', e.message); } ``` #### 性能测量原理 浏览器性能时间线模型： $$ \begin{array}{c} \text{time} \\ \downarrow \\ \underset{\text{mark A}}{|} \xrightarrow{\Delta t_1} \underset{\text{mark B}}{|} \xrightarrow{\Delta t_2} \underset{\text{mark C}}{|} \\ \hline \text{measure } M_1 = \Delta t_1 \\ \text{measure } M_2 = \Delta t_1 + \Delta t_2 \end{array} $$ 当标记不存在时，$\Delta t$ 无法计算，触发 `NotFound` 错误 --- ### 相关问题 1. 如何在 React 中正确使用 Performance API 监控组件渲染时间？ 2. React 组件卸载时如何自动清理性能标记避免内存泄漏？ 3. 浏览器 Performance API 的测量误差范围如何计算？[^1] 4. 使用 React Profiler 与原生 Performance API 有何优劣对比？[^2] [^1]: 参考浏览器 Performance API 规范中关于时间戳精度的定义 [^2]: React 官方文档推荐的性能优化方案