chrome-react-perf使用指南：快速掌握Wasted、DOM、Inclusive、Exclusive四大性能报告-开发者社区

chrome-react-perf使用指南：快速掌握Wasted、DOM、Inclusive、Exclusive四大性能报告

【免费下载链接】chrome-react-perfAn Operation Interface for react-addons-perf Package项目地址: https://gitcode.com/gh_mirrors/ch/chrome-react-perf

chrome-react-perf 是一款为 react-addons-perf 打造的 Chrome 扩展，通过图形化操作界面帮你一键记录 React 渲染性能，并生成 Wasted、DOM、Inclusive、Exclusive 四大性能报告，让性能瓶颈一目了然。

相比直接在控制台手写Perf.start()/Perf.stop()，chrome-react-perf 把繁琐的操作封装成了可视化面板：

左侧是录制控制区与 Profiles 列表，右侧展示性能报告结果（如Print Wasted、Print Inclusive），顶部还有四个报告的勾选框，这正是 chrome-react-perf 的性能报告操作界面。

chrome-react-perf 依赖页面暴露的全局变量Perf（即 react-addons-perf）。准备工作分两步：

方式一，通过 webpack 的 expose loader：

import 'expose?Perf!react-addons-perf'

方式二，直接挂到 window：

import Perf from 'react-addons-perf' window.Perf = Perf

💡 小提示：暴露成功后，在页面控制台输入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。

Wasted（浪费）列出那些重新执行了渲染、但输出结果与上次完全一样的组件。这类重复渲染没有带来任何界面变化，纯属浪费，是shouldComponentUpdate/React.PureComponent优化的头号目标。表格中times越大，说明该组件重复渲染越频繁。

DOM 报告展示录制期间 React 实际操作的 DOM 次数，分为 Mounts（挂载）、Updates（更新）、Removals（移除）与 Total（总计）。数字偏高时，可检查是否存在大列表未做虚拟滚动、频繁增删 DOM 等写法。

Inclusive（包含）统计"渲染组件本身 + 所有子组件"的总耗时及占比。排名靠前的组件意味着整棵子树渲染偏重，适合从结构层面优化（拆分子树、懒加载等）。

Exclusive（独占）只统计组件自身 render 逻辑的耗时，不含子组件。若某组件 Inclusive 高而 Exclusive 低，瓶颈在子树；反之则是该组件的 render 函数本身太重（复杂计算、大量 map 等），应做缓存或逻辑拆分。

react-addons-perf 通过console.table与console.log输出结果，插件用 shapeMeasurements.js 临时拦截这两个方法，把数据"偷"到面板里再还原，因此页面上不会看到重复的控制台输出。

只勾需要的报告：面板顶部四个复选框（ResultControl.js）可单独控制 Wasted / DOM / Inclusive / Exclusive 的显示，避免一屏放不下
录制场景要典型：只操作你想分析的路径（如打开详情页），数据更聚焦
关闭面板自动 Stop：忘记点 Stop 也没关系，关闭 Perf 面板会自动调用Perf.stop()收尾
仅用于开发环境：react-addons-perf 只在开发构建中有意义，请勿引入生产包