如何借助工具来发现性能问题,对 React 进行调优?
在日常的开发中,我们主要借助两个工具:
- React DevTool
- Chrome DevTool
React DevTool
React DevTool,是由 FaceBook 提供的一个 Chrome 插件,通过它不仅能在开发时观察到整个应用的状态,还可以进行性能调优。最主要的调优方式是可以帮助我们找到多余的渲染。
安装
首先,我们要安装一下 React DevTool,安装完毕后可以在浏览器的右上角看到它(或者被收纳了起来)如下图 1,如果你打开的网站用到了 React ,你会看到插件的图标被点亮如下图 2。
设置
在你的 React 项目页面切换到 Components Tab,点开右上角的 setting icon,勾选上“Highlight updates when components render.”。
这个功能可以让你在操作页面时,展示哪些组件发生了更新(高亮),就像下面这样:
我们看到在简单操作 Counter 组件的加减时,侧边面板也发生了重新渲染,这显然是有问题的。
优化一下
这时,我们就可以来到项目代码中检查一下,原来是在 SidePanel 中依赖了 counter 的状态。
- SidePanel.js
// ...
const mapStateToProps = function (state) {
return {
router: state.router,
examples: state.examples,
};
};
// ...
检查相关代码,发现内部并没有用到 examples 的地方,所以我们直接删掉他。优化之后,+/- 的点击只引起 Counter 组件的刷新,我们认为是 ok 的。
如果 SidePanel 的内部确实用到 example 中的一个字段,那么建议只绑定该字段而不是整个 example,也可以避免大量不必要的重新渲染。
Chrome DevTool
Chrome DevTools,即 Chrome 开发者工具,是一组网页制作和调试的工具,内嵌于 Google Chrome 浏览器中。
依旧是在 Counter
页面,我们切换到 Performance
面板,它可以对我们在页面上的操作进行一顿性能上数据的收集,帮助我们定位性能瓶颈。
为了测试性能瓶颈,我们可以对 CPU 进行降速(6x slowdown
),然后点击开始记录按钮,当记录开始再点击 Counter +/-
操作,操作完成后点击结束按钮(stop)。
在 summary
里看到 React 花了大部分时间在 diff
的计算上(scripting
),在 rending
和 painting
上倒是没花多少事件。
如果想看某一块的资源花费,可以把鼠标悬浮在上方后滚轮滚动进行缩放。可以看到 SidePanel 上的更新的内容,Route、Link...
通过 Performance
,就可以找到性能优化空间大的组件或者是函数了。
参考资料
- 全新的 React DevTools 简介:zh-hans.reactjs.org/blog/2019/0…