chrome-react-perf使用指南：快速掌握Wasted、DOM、Inclusive、Exclusive四大性能报告
项目地址: https://gitcode.com/gh_mirrors/ch/chrome-react-perf chrome-react-perf 是一款为 react-addons-perf 打造的 Chrome 扩展，通过图形化操作界面帮你一键记录 React 渲染性能，并生成 Wasted、DOM、Inclusive、Exclusive 四大性能报告，让性能瓶颈一目了然。
🎯 chrome-react-perf 是什么？
相比直接在控制台手写 Perf.start() / Perf.stop()，chrome-react-perf 把繁琐的操作封装成了可视化面板：
- 一键 Start / Stop 录制：无需记忆 API 调用顺序
- 停止即出报告：点击 Stop 后自动生成四大性能报告
- 智能自动停止：关闭 DevTools 的 Perf 面板时自动结束录制，避免遗漏
- 报告自由勾选：按需显示 Wasted、DOM、Inclusive、Exclusive 任意组合
左侧是录制控制区与 Profiles 列表，右侧展示性能报告结果（如 Print Wasted、Print Inclusive），顶部还有四个报告的勾选框，这正是 chrome-react-perf 的性能报告操作界面。
📦 如何安装与启用 chrome-react-perf
chrome-react-perf 依赖页面暴露的全局变量 Perf（即 react-addons-perf）。准备工作分两步：
第一步：让页面暴露 Perf 全局变量
方式一，通过 webpack 的 expose loader：
import 'expose?Perf!react-addons-perf'
方式二，直接挂到 window：
import Perf from 'react-addons-perf'
window.Perf = Perf
💡 小提示：暴露成功后，在页面控制台输入
Perf能打印出模块对象，即说明配置生效。
第二步：打开 DevTools 的 Perf 面板
安装扩展后打开 Chrome 开发者工具，标签栏会多出一个 Perf 面板（面板由 devtools.js 动态创建）。打开面板时，插件会自动检测页面是否已暴露 Perf。
如果你想从源码构建插件，可以克隆仓库：
git clone https://gitcode.com/gh_mirrors/ch/chrome-react-perf
npm install
npm run dev # 开发模式（热更新）
npm run build # 打包生产版本
📊 四大性能报告逐个拆解
点击 Start 开始录制，在页面上正常操作（切换路由、点击按钮、填写表单……），再点 Stop 结束。插件会按顺序渲染四大报告区块，相关逻辑见 ProfileResult.js。
1️⃣ Wasted 报告：揪出"白渲染"的组件
Wasted（浪费） 列出那些重新执行了渲染、但输出结果与上次完全一样的组件。这类重复渲染没有带来任何界面变化，纯属浪费，是 shouldComponentUpdate / React.PureComponent 优化的头号目标。表格中 times 越大，说明该组件重复渲染越频繁。
2️⃣ DOM 报告：统计挂载、更新与移除次数
DOM 报告 展示录制期间 React 实际操作的 DOM 次数，分为 Mounts（挂载）、Updates（更新）、Removals（移除）与 Total（总计）。数字偏高时，可检查是否存在大列表未做虚拟滚动、频繁增删 DOM 等写法。
3️⃣ Inclusive 报告：组件总耗时排行
Inclusive（包含） 统计"渲染组件本身 + 所有子组件"的总耗时及占比。排名靠前的组件意味着整棵子树渲染偏重，适合从结构层面优化（拆分子树、懒加载等）。
4️⃣ Exclusive 报告：组件自身耗时排行
Exclusive（独占） 只统计组件自身 render 逻辑的耗时，不含子组件。若某组件 Inclusive 高而 Exclusive 低，瓶颈在子树；反之则是该组件的 render 函数本身太重（复杂计算、大量 map 等），应做缓存或逻辑拆分。
🧩 报告数据是怎么拿到的？
react-addons-perf 通过 console.table 与 console.log 输出结果，插件用 shapeMeasurements.js 临时拦截这两个方法，把数据"偷"到面板里再还原，因此页面上不会看到重复的控制台输出。
🛠️ 高效使用 chrome-react-perf 的技巧
- 只勾需要的报告：面板顶部四个复选框（ResultControl.js）可单独控制 Wasted / DOM / Inclusive / Exclusive 的显示，避免一屏放不下
- 录制场景要典型：只操作你想分析的路径（如打开详情页），数据更聚焦
- 关闭面板自动 Stop：忘记点 Stop 也没关系，关闭 Perf 面板会自动调用
Perf.stop()收尾 - 仅用于开发环境：react-addons-perf 只在开发构建中有意义，请勿引入生产包
📁 源码目录速览
- 面板 UI：ProfileControl.js（Start/Stop 按钮）、ProfileResult.js（报告渲染）
- 页面注入与数据抓取：pageScript.js、shapeMeasurements.js
- 面板创建入口：devtools.js
掌握这套流程后，你只需"打开 Perf 面板 → Start → 操作页面 → Stop"四步，就能快速定位 React 应用中的重复渲染与耗时组件，把性能优化做到刀刃上。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
