ReactJS 将 JavaScript 的速度与独特的渲染功能相结合，使应用程序具有高度动态、面向性能并响应用户输入。
2018年JS状态报告
将性能列为ReactJS在如此短的时间内获得如此普及的主要原因。 在构建单页应用程序 （SPA） 的选项方面，React 提供了优于 Angular 和其他 JavaScript 框架和库的性能优势。 由于 React 在 JavaScript 中维护了一个虚拟 DOM，因此它可以快速确定将文档带到所需状态所需的最小更改。 由于 React 组件的状态保存在 JavaScript 中，因此您可以避免访问 DOM。
对于小型应用程序，ReactJS 提供的开箱即用的性能优化绰绰有余。 但是，随着应用程序发展到包含更复杂的视图，维护和并行虚拟 DOM 可能会成为一件代价高昂的事情。 大型应用程序是巨大、分支和复杂的渲染树。 每当将 props 更新到节点时，React 都必须重新配置渲染树，从节点一直到分支，最后是进行虚拟 DOM 比较的叶子。
然而，随着用户群的增长，应用程序的复杂性往往会增加，承载更多的依赖关系，并包含更多的第三方插件。 它遇到性能瓶颈的可能性只会扩大。 随着数百万各种大小和类型的支持 Web 的设备上的应用程序数量不断增加，您将无法逃避潜在的性能噩梦。
例如，用户在浏览器中与 Web 应用程序交互时期望每秒 60 帧，这只给你 16.7 毫秒的渲染每一帧。 当应用运行缓慢时，响应用户事件通常需要很长时间，处理数据或重新呈现新数据的时间也太长。 在大多数情况下，您不是在 Clock 上进行复杂的数据处理，而是在浪费时间重新渲染。
毫无疑问，即使是设计和优化最完美的 React 应用程序也需要性能监控工具。
使用探查器监视组件装载
组件重新渲染的次数，以及所花费的资源和时间，可以在很大程度上说明 React 应用程序在生产中的性能。 Profiler 组件是一个内置的 React 组件，用于测量组件子树的“挂载”或“更新”时间。 每当更新或挂载组件时，Profiler 的 onRender 函数都会带有时间戳。 Profiler 提供了一种平易近人的方式来查看 React 应用程序中的问题。
import { unstable_Profiler as Profiler } from "react"
<Profiler id="Counter" onRender={callback}>
<Counter />
</Profiler>
id 属性标识报告，而 onRender 函数在挂载或修改计数器组件时与参数相关联。
function callback(id, phase, actualTime, baseTime, startTime, commitTime) {
log("id: " + id, "phase:" + phase, "actualTime:" + actualTime, "baseTime: " + baseTime, "startTime: " + startTime, "commitTime: " + commitTime)
}
函数的参数是收集的呈现 计数器 组件时的时间戳。 我们将看一下每个参数。
同上。 与探查器组件关联的唯一 ID。
阶段。 这将检测处于“装载”阶段还是“更新”阶段的阶段。
实际时间。 探查器呈现已提交更新所花费的时间。
基时间。 探查器树中的某个组件装入或更新所花费的时间。
开始时间。 记录时间戳 Profiler 开始测量其后代的装载/渲染时间。
提交时间。 React 提交更新所花费的时间。
监视使用 React 开发人员工具重新渲染的组件
在开发过程中，如果您了解正在重新渲染的组件，则可以将生产中的应用程序从各种性能瓶颈中拯救出来。 React 开发人员工具通过在组件边界重新渲染时为组件边界着色，使开发人员变得简单。 如果主要组件重新渲染，则捕获 计数器 和 计数 组件的边缘将短暂突出显示。
显示的颜色类型取决于重新渲染组件的频率/频率，使您能够轻松识别哪个组件更新最频繁，以便您可以适当地对其进行优化。
|绿色 – 低频更新
|蓝色 – 平均频率更新
V 红色 – 表示非常频繁的更新
使用 React.addons.Perf 识别性能问题
要启动 Perf，必须从控制台调用 Perf.start（），记录操作，然后调用 Perf.stop（） 来停止 Perf。 然后，可以调用以下任一方法来查看有用的度量集。
Perf.printWasted()
Perf.printWasted（） 是您在 React.addons.Perf 上调用的最有用的方法。 Perf.printWasted（）告诉你收缩渲染树和比较虚拟DOM所损失的时间。 上面提到的这些组件是提高 React 应用程序性能的主要候选者。
Perf.printInclusive() / Perf.printExclusive()
Perf.printInclusive （） 和 Perf.printExclusive（） 返回用于呈现组件的时间量。 大多数开发人员不会发现此方法非常有用，因为渲染触发的性能问题通常可以通过不使用上述方法进行渲染来解决：Perf.printWasted（）。
但是，该方法可以帮助您识别在生命周期方法中执行大量计算的组件。 您将了解到，在修复 printWasted 问题后，是未优化的应用程序代码占用了这些宝贵的资源。 或者，你可以使用标准的Chrome DevTool的JavaScript Profiler，直接查看最繁重的函数调用。
Perf.printDOM()
Perf.printDOM（） 显示了在渲染 React 树期间触发的所有 DOM 操作。 如果你玩 ReactJS 已经有一段时间了，那么你就会知道这可能是最麻烦的部分。 如果您的应用程序非常复杂，要浏览无穷无尽的行和列列表，可能需要很长时间才能检测到到底出了什么问题。
一旦你的第一组组件被渲染出来，你预计未来的重新渲染会重用现有的 DOM 节点，而不是创建新的节点——这是 React 的虚拟 DOM 提供的优化，也是每个 React 开发人员都理所当然的。
Perf.printDOM（） 可以方便地查找特殊、昂贵的浏览器怪异或监控主要的、不可预测的 DOM 修改。
ReactJS Web 应用程序的综合监控
虽然上述方法是监控 React 应用程序性能不可或缺的一部分，但它们无法模仿典型用户在使用应用程序时执行的操作。 综合监控平台与脚本
记录器相结合
，可以运行和重放预先录制的脚本，在真实浏览器中模拟用户事务和典型用户操作。 例如，基本导航、表单提交、购物车交易、在线游戏、滚动速度、动画等。
虽然 Perf 是一个很好的工具，可以监控渲染树中损失的时间量，并将虚拟 DOM 与实际 DOM 进行比较，但它并不能转化为用户在使用应用程序时可能遇到的体验。 合成
Web 应用程序
监控解决方案，如
Dotcom 监视器
提供的解决方案，包含一个易于使用的脚本工具来编写各种监控测试脚本。 这些脚本可以在专用测试环境中运行，并定期检查 Web 应用程序中的各种参数。 使用使用真实浏览器的综合监视工具可以让您获得最准确的性能结果。
此外，可以使用不同的设备、浏览器和地理位置执行综合监控。 对于单页应用程序，初始页面加载速度不如最终用户的体验重要。 不仅确保应用程序启动并运行至关重要，还必须监视功能。 例如，用户是否可以执行必要的操作，以及第三方服务或 API 导致延迟或问题的原因（如果有）。
Web 应用程序监视的目标是在问题影响大量用户之前自动执行识别问题的过程。 通过综合监控，您可以根据特定 React 应用程序的要求设置警报，并在出现问题时立即收到通知。 与上面讨论的其他工具不同，综合监控采用主动方法，将您和您的团队从必须运行手动测试的耗时过程中解放出来。
监控 ReactJS 应用：结论
虽然这些工具对于在开发环境中监控 React 应用程序很有用，但监控生产中的性能是另一个挑战，并且具有更大的权重。 屈服于“在我的机器上工作”的心态是一个警示故事，当你的应用程序在生产中的性能受到威胁时。 另一方面，综合监控工具从最终用户的角度为您提供性能报告，而不是从开发人员想象的一些陈词滥调的测试用例中。 尽管如此，如果您想升级您的 ReactJS 性能监控，请
立即免费试用 Dotcom 监视器 30 天
。
