React 性能优化:React DevTool & Chrome DevTool

2,984 阅读2分钟

如何借助工具来发现性能问题,对 React 进行调优?

在日常的开发中,我们主要借助两个工具:

  • React DevTool
  • Chrome DevTool

React DevTool

React DevTool,是由 FaceBook 提供的一个 Chrome 插件,通过它不仅能在开发时观察到整个应用的状态,还可以进行性能调优。最主要的调优方式是可以帮助我们找到多余的渲染。

安装

首先,我们要安装一下 React DevTool,安装完毕后可以在浏览器的右上角看到它(或者被收纳了起来)如下图 1,如果你打开的网站用到了 React ,你会看到插件的图标被点亮如下图 2。

setup.png

setup-2.png

设置

在你的 React 项目页面切换到 Components Tab,点开右上角的 setting icon,勾选上“Highlight updates when components render.”。

reactdevtool-1.png

这个功能可以让你在操作页面时,展示哪些组件发生了更新(高亮),就像下面这样:

counter.png

我们看到在简单操作 Counter 组件的加减时,侧边面板也发生了重新渲染,这显然是有问题的。

优化一下

这时,我们就可以来到项目代码中检查一下,原来是在 SidePanel 中依赖了 counter 的状态。

  • SidePanel.js
// ...
const mapStateToProps = function (state) {
  return {
    router: state.router,
    examples: state.examples,
  };
};
// ...

检查相关代码,发现内部并没有用到 examples 的地方,所以我们直接删掉他。优化之后,+/- 的点击只引起 Counter 组件的刷新,我们认为是 ok 的。

counter-2.png

如果 SidePanel 的内部确实用到 example 中的一个字段,那么建议只绑定该字段而不是整个 example,也可以避免大量不必要的重新渲染。

Chrome DevTool

Chrome DevTools,即 Chrome 开发者工具,是一组网页制作和调试的工具,内嵌于 Google Chrome 浏览器中。

依旧是在 Counter 页面,我们切换到 Performance 面板,它可以对我们在页面上的操作进行一顿性能上数据的收集,帮助我们定位性能瓶颈。

performance.png

为了测试性能瓶颈,我们可以对 CPU 进行降速(6x slowdown),然后点击开始记录按钮,当记录开始再点击 Counter +/- 操作,操作完成后点击结束按钮(stop)。

performance-2.png

summary 里看到 React 花了大部分时间在 diff 的计算上(scripting),在 rendingpainting 上倒是没花多少事件。

如果想看某一块的资源花费,可以把鼠标悬浮在上方后滚轮滚动进行缩放。可以看到 SidePanel 上的更新的内容,Route、Link...

01.png

通过 Performance,就可以找到性能优化空间大的组件或者是函数了。

参考资料

React 性能优化