用 console.count 和 console.time 可快速定位组件重渲染频次与耗时瓶颈：count 统计渲染次数识别非必要重渲染，time 分段计时定位慢逻辑，组合使用可发现“高频+长耗时”问题，轻量高效。
直接在组件的渲染函数（如 React 的 render、Vue 的模板或 setup 返回函数）中，用 console.count 标记渲染次数，再用 console.time 包裹关键逻辑段，就能快速定位“谁在反复触发”和“哪段耗时异常”，无需引入性能分析工具。
用 console.count 精准统计渲染频次
在组件主体执行入口（比如函数组件顶部、render() 开头）加一句：
console.count('MyComponent render')每次渲染都会输出带累加序号的日志，例如：
MyComponent render: 1<br>MyComponent render: 2<br>MyComponent render: 3
如果数字增长远超预期（比如仅点击一次按钮却触发了 10 次），说明存在非必要重渲染。常见原因包括：
- 父组件无意义地更新了 props（如内联对象/函数）
- 状态更新未做浅层比较（React 中未用
useMemo/useCallback，Vue 中响应式对象深层变更被过度追踪） - 使用了未稳定化的 Context 值（Context Provider 内容频繁变动）
用 console.time 定位慢渲染中的瓶颈环节
在渲染函数内部关键节点插入计时标记，例如：
console.time('MyComponent render - props processing');<br>// 处理 props 的逻辑，如 filter/map 计算<br>console.timeEnd('MyComponent render - props processing');<br><br>console.time('MyComponent render - JSX build');<br>// return (...) 部分前的 JSX 构建准备（如条件计算、class 拼接）<br>console.timeEnd('MyComponent render - JSX build');这样能明确看出是数据处理拖慢了，还是模板生成开销大。注意：console.time 不会阻塞执行，但多次同名调用会覆盖上一次计时——因此确保每个 time 和 timeEnd 的标签唯一且语义清晰。
组合使用：识别「高频 + 长耗时」双重问题
把两者结合，可发现更隐蔽的问题。例如：
console.count('ListRow render');<br>console.time('ListRow render - item calc');<br>const displayText = expensiveTransform(item); // 实际耗时函数<br>console.timeEnd('ListRow render - item calc');若看到 ListRow render: 50 且其中多次出现 ListRow render - item calc: 87ms，就说明：该子组件被批量重渲染，且每次都在重复执行高成本计算——这时应立刻将 expensiveTransform 提到外层 memo 化，或改用 useMemo 缓存结果。
收尾建议：轻量级但足够有效
不需要写 Hook 封装、不依赖 DevTools 插件，仅靠两行 console 就能暴露 80% 的典型渲染问题。上线前删掉即可，开发阶段它们就是最直接的「渲染显微镜」。
