1. 代码片段执行时间
console.time('xxx')
// 代码片段
console.timeEnd('xxx')
在代码片段包裹上述代码，执行后，命令行会输出该段代码的执行时间，非常方便。
2. react Profile
react的<Profiler/>包裹组件后，并传入id和onRender回调函数。
id是一个唯一标识符，用于区分不同的Profiler实例；onRender是一个回调函数，每次组件树渲染完成时都会被调用，提供大量关于渲染过程的信息。
回调函数参数
- id：标识正在测量的UI部分。
- phase：表示组件树的挂载（mount）、更新（update）或嵌套更新（nested-update）。
- actualDuration：本次更新渲染树所花费的时间（毫秒）。
- baseDuration：估算在不使用记忆化（如memo和useMemo）的情况下重新渲染整棵子树所需的时间。
- startTime：React开始渲染的时间戳。
- commitTime：React提交更新的时间戳12。
性能数据解读和优化建议
通过分析Profiler收集的数据，可以了解到哪些组件渲染较慢，从而有针对性地进行性能优化。常见的优化方式包括：
- 避免不必要的组件重新渲染：使用
React.memo进行组件的浅比较。 - 减少组件层级：尽量避免过深的组件嵌套。
- 懒加载组件：使用
React.lazy和Suspense实现组件的懒加载。 - 减小组件大小：拆分大型组件，优化组件内部的代码逻辑