【译】用 Chrome 开发者工具以及 react 16 版本分析性能

翻译自：debugging-react-performance-with-react-16-and-chrome-devtools

github的地址 欢迎 star
文章主要介绍了用 Chrome 的工具和基于 react 16的性能分析。

react 是现在前端主要框架之一，不仅因为它出名，更因为它出色的渲染性能。react 的虚拟 DOM 以高效的渲染性能闻名，但是在我们项目会出现根本感受不到 react 高效性能的情况，这是我们该怎么定位，怎么修复它呢？

今天我将用真实的 react 代码和 chrome 工具来证实 chrome 新的强大的性能追踪工具的特性以及怎么用它来诊断出渲染缓慢的组件。

当然新的性能工具需要满足下面3个条件：

1. 在开发模式中用 React 16
2. 用 source-maps 导出你的 js（这个是可选的，但是强烈推荐你）
3. 使用 Chrome 或者 Chromium’s Dev Tools

在 Chrome 中设置你的 audit

首先，你需要足够的空间，最好把开发者工具弹出来，使它和你的屏幕一样大，那样是最好的。

我们应该用 chrome 的 audit 功能模拟真实环境中代码的运行情况，这是必不可少的。不是每个人都有价值 3000 美元的电脑或者最新的手机。

幸运的是，Chrome 对于设备模拟覆盖广泛，我们能够降低 javascript 的执行速度，通过这个我们能清晰的发现性能问题，还有额外的好处，如果你能做到在硬件一般的设备运行快速运行，那么桌面上就能体验飞一般的感觉。

降低你得设备至少到 4x 就将和 Motorola Moto G4（摩托罗拉手机）一样的性能

查看性能跟踪

在开发者模式，以及 react 16版本渲染的条件下，它会为每一个组件创建标记与相关具体的调用。

首先，打开（本地的）需要测试的页面，点击 ‘Start profiling and reload page’ 按钮，这样就创建了一个对页面的性能分析记录（a performance profiler audit）。

这将会为当前页面记录性能轨迹。在页面加载完成几秒钟之后，Chrome将会自动停止记录。

或者，使用键盘快捷键：⌘+⇧E

一旦你开始记录，你的窗口看起来是这个样子：

我们能看到一条从左到右的记录我们页面加载和初始化的时间轴

我想花一两秒钟指出一些对性能工具使用的新人来说不太明显的事情。

1. 如上图中①所示，红色的指示横条说明在时间轴这部分占用了大量 cpu 资源（较长的任务执行），我们应该对这个地方进行分析
2. performance 顶部窗口图表使用不同的颜色代表不同类型的活动。每个类别都需要不同的分析，修复，造成性能的原因也不同。

现在我们先聚焦在“Scripting”（JavaScript运行时性能）

展开窗口，单击打开用户计时，用截屏时间线来分析你的页面如何绘制的?

接下来我们要去分析那些cpu占用高显示红色的部分。我们可以看到在整个性能跟踪期间页面渲染的元素。

在图表区域拖拽可以缩放时间轴，你注意到 emoji ⚛️了吗?

一缩放立即就会显示用户花费时间信息，然后我们观察到一个叫 Pulse 的组件，它花费了500ms时间渲染。

在 Pulse 组件的下面，可以看到它的子组件的渲染，尽管组件的大小表明它们渲染不会花费这么长时间。

发现执行慢的函数

1. 单击你要分析的组件，在这里就是 Pulse。然后我们只需关注在 Pulse 组件执行缓慢的部分。
2. 选择性能开发工具中 “Bottom-Up”.
3. 按照总时间（total time）从高到低排序，当然，你也可以按照自己本身时间（Self time）或者除了 URL 以外东西排序。总之，怎么适合你分析，怎么排序最好。
4. 在你需要分析代码的地方有个箭头，点击它，在这里就是 map 看起来是可疑的。它被调用了很多次，总共执行时间为 90ms。
5. 这就是你为什么需要sourcemaps的原因：点击 MetricStore.js:59将会打开代码并定位到59行

在代码执行花费较长的左边就会有一个时间标识（大概这不是我向世界展示我代码的最佳时机）

当你知道怎么原因改进它是简单的

在过去的几周里，我通过这样的方法实现了之前很复杂，需要花费很多解决的代码的优化工作。现在我完全知道如何以及在哪里寻找 JavaScript 性能问题。我也确信在未来我能写出更好的代码。

... 广告滤过 ...

为什么 React 的分析工具会在 Chrome 里面？

在react内部，react发布的这些工具也是通过 User Timing API，它就会在你的代码里面添加时间标记，而Chrome利用User Timing API实现这个功能。

想象一下一个组件初始化花费 0.4s，用户点击购买按钮花费 15s 时间

关于 User Timing API 的介绍，可以看看 Alex Danilo在2014年发表的 User Timing API，这是名副其实的HTML5 基石的文章。

所有的主流浏览器都已经支持 User Timing API，但是在 Chrome 中通过 debugging 更简单方便调试一个 React 应用还需要走一段时间的路。

最优化你的 JavaScript

我衷心的希望这篇文章能够提升你性能分析的水平。请留下评论，分享你学到的东西或者改进你的应用的方法?！

如果有错误或者不严谨的地方，请务必给予指正，十分感谢!

参考

1. developers.google.com/web/tools/c…