3步上手chrome-react-perf：React性能分析Chrome扩展新手入门教程-平芜编程栈

3步上手chrome-react-perf：React性能分析Chrome扩展新手入门教程

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

chrome-react-perf是一款专为 React 开发者打造的Chrome 性能分析扩展，它把react-addons-perf包的调用包装成可视化的操作界面，让你在 Chrome DevTools 中一键启动/停止性能录制，并自动查看 wasted、inclusive、exclusive 等关键数据。新手只需 3 步即可上手，无需手动写 Console 代码。

下面这张演示图展示了该 React 性能分析工具在 DevTools 中的实际工作界面（Perf 标签页 + 性能数据面板）：

为什么需要 chrome-react-perf？

做 React 开发时，你可能会遇到这些场景：

页面越写越卡，却不知道是哪个组件拖慢了渲染；
想排查不必要的重渲染，却记不住Perf.start()/Perf.stop()该怎么用；
每次都要手动打开 Console 敲命令，非常繁琐。

chrome-react-perf解决的就是这些问题——它是 react-addons-perf 的图形化操作界面，核心特性包括：

特性	说明
⚡ 一键 Start / Stop	不用写代码，点按钮即可开始和停止性能录制
📊 停止后自动展示结果	录制结束自动打印 wasted、DOM、inclusive、exclusive 数据
🧹 关闭面板自动停止	关闭 Perf 标签页时自动调用`Perf.stop()`，避免数据污染

💡 小贴士：它依赖一个名为Perf的全局变量，所以你的项目需要先安装并暴露react-addons-perf。

第1步：安装 chrome-react-perf 扩展

从 Chrome 网上应用店搜索"React Perf"安装即可，安装包名在 chrome/manifest.prod.json 中定义。

安装完成后，打开任意网页的 DevTools，你会在顶部标签栏看到新增的Perf标签页——它就是由 chrome/extension/devtools/devtools.js 通过chrome.devtools.panels.create注册的。

第2步：让你的项目暴露 Perf 变量

这是新手最容易卡住的一步。Chrome React Perf 依赖全局变量Perf，有两种常见暴露方式（项目要求 React 版本与react-addons-perf匹配，当前依赖为0.14.x，见 package.json）：

方式一：Webpack expose loader

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

方式二：直接挂到 window 上

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

⚠️ 注意：暴露后确保在 Console 中能成功执行Perf.start()，扩展才能正常工作。

页面端脚本会自动轮询检测window.Perf是否存在，检测逻辑位于 chrome/extension/page/pageScript.js。

第3步：开始录制并查看 React 性能数据

现在进入正题，3 个操作搞定性能分析：

点击 Start：开始记录组件渲染数据（按钮组件见 app/components/ProfileControl.js）；
操作你的页面：切换页面、点击按钮、输入表单，让 React 充分渲染；
点击 Stop：自动打印性能报告，无需手动调用。

报告包含 4 类核心指标：

🗑️Wasted：被浪费的渲染（组件被重新渲染但输出没有变化）；
🌳DOM：DOM 操作统计；
📈Inclusive：组件自身 + 子组件的累计耗时；
🎯Exclusive：仅组件自身的耗时。

你还可以通过顶部的勾选框（wasted / dom / inclusive / exclusive）自由组合输出维度，数据展示逻辑在 app/components/ProfileResult.js 中实现。

快速上手清单 ✅

步骤	操作	验证方式
1	安装 "React Perf" 扩展	DevTools 出现 Perf 标签页
2	项目中暴露`window.Perf`	Console 执行`Perf.start()`无报错
3	Start → 操作页面 → Stop	自动打印性能数据报告