挑战 监控 ReactJS 应用程序

ReactJS 将 JavaScript 的速度与独特的呈现功能相结合,使应用程序具有高度动态、面向性能且响应用户输入。
JS 2018 年报告
引用表现作为 ReactJS 在如此短的时间内获得如此受欢迎度的主要原因。 当涉及到构建单页应用程序 (SPA) 的选项时,React 比 Angular 和其他 JavaScript 框架和库具有性能优势。 由于 React 在 JavaScript 中维护虚拟 DOM,因此它可以快速确定将文档带到所需状态所需的最小更改。 由于 React 组件的状态保存在 JavaScript 中,因此您可以避免访问 DOM。

对于小型应用程序,ReactJS 提供开箱即用的性能优化已经足够了。 但是,随着应用程序发展到包含更复杂的视图,维护和并行虚拟 DOM 可能会成为一件代价高昂的事情。 大型应用程序是巨大的、分支的和复杂的渲染树。 每当将道具更新到节点时,React 都必须从节点一直从分支中重新配置呈现树,最后,在进行虚拟 DOM 比较的叶上重新配置呈现树。

但是,随着用户群的增长,应用程序往往会在复杂性中增长,承载更多的依赖关系,并集成更多的第三方插件。 其达到性能瓶颈的可能性只会扩大。 在数百万支持 Web 的设备上,各种大小和类型的设备上的应用程序数量不断增加,您无法逃避潜在的性能噩梦。

例如,用户在浏览器中与 Web 应用程序交互时,每秒需要 60 帧,这仅为您提供 16.7ms 来呈现每个帧。 当应用速度较慢时,响应用户事件通常需要很长时间,处理数据或重新呈现新数据需要很长时间。 在大多数情况下,您不会在 Clock 上执行复杂的数据处理,从而浪费时间重新渲染。

毫无疑问,即使是最完美设计和优化的 React 应用也需要一个性能监控工具。

 

使用探查器监控组件安装

组件重新渲染的次数,以及资源和花费的时间,可以说明生产中 React 应用程序的性能。 探查器组件是一个内置的 React 组件,用于测量组件子树的”装载”或”更新”时间。 每当更新或装载组件时,探查器的onRender功能都会被时间戳。 探查器提供了一种查看 React 应用中问题的可近方法。

 

导入 [ unstable_Profiler 作为探查器 * 从"反应"

<探查器 ID= 渲染上的"计数器"{callback}>

    <柜台 />

</探查器>

 

id prop 标识报告,而onRender函数在装入或修订计数器组件时与参数相关联。

 

函数回调(id、阶段、实际时间、基本时间、开始时间、提交时间)|

日志("id:"=id,"阶段:"=阶段:"实际时间:"=实际时间","基本时间"=基本时间","开始时间:""=开始时间","提交时间:"=提交时间)

}

 

函数的参数收集呈现计数器组件的时间戳。 我们将查看每个参数。

 

id. 与探查器组件关联的唯一 ID。

。 这将检测处于”安装”阶段还是”更新”阶段。

实际时间。 探查程序为呈现已提交的更新所花时间。

基本时间。 探查器树中的一个组件装载或更新所花时间。

开始时间。 记录时间戳探查器开始测量其后代的装载/渲染时间。

提交时间。 React 提交更新所花的时间。

 

使用反应开发人员工具重新呈现的监视组件

在开发过程中,如果您了解正在重新呈现哪个组件,则可以将应用程序从各种性能瓶颈中节省到生产中。 React 开发人员工具通过着色组件边界(每当重新呈现)使开发人员变得简单。 如果主组件重新渲染,则捕获计数器计数组件的边缘将短暂突出显示。

显示的颜色类型取决于组件重新呈现的频率/频率,使您能够轻松识别最频繁更新的组件,以便对其进行适当的优化。

 

|绿色 – 低频更新

|蓝色 – 平均频率更新

v 红色 – 表示非常频繁的更新

 

识别与反应.addons.Perf 的 Perf 问题

要启动 Perf,您必须从控制台调用Perf.start(),记录操作,并调用Perf.stop()以停止 Perf。 然后,您可以调用以下任何方法来查看一组有用的测量值。

佩尔夫.打印浪费()

Perf.print,浪费()是你调用React.addons.Perf上最有用的方法。 Perf.print 浪费()会告诉您失去的收缩呈现树和比较虚拟 DOM 的时间。 上面提到的这些组件是提高 React 应用程序性能的主要候选组件。

 

Perf.print 包包() / Perf.print 独家()

Perf.print 包容()和 Perf.print 独家()返回用于呈现组件的时间。 大多数开发人员不会发现此方法非常有用,因为渲染引发的性能问题通常通过不使用上述方法进行渲染来解决:Perf.print,浪费()

但是,该方法可以帮助您识别在生命周期方法中执行大量计算的组件。 您将了解到,在修复打印浪费问题后,占用这些宝贵资源的是您的未优化应用程序代码。 或者,您可以携带标准的 Chrome DevTool 的 JavaScript 探查器,并直接查看最繁重的功能调用。

 

佩尔夫.printDOM()

Perf.printDOM()显示在渲染 React 树期间触发的所有 DOM 操作。 如果你玩了相当长一段时间的ReactJS,那么你知道这也许是最麻烦的部分。 如果应用非常复杂,要浏览无休止的行和列列表,可能需要永恒才能检测到底出了什么问题。

呈现第一组组件后,您预计将来的重新渲染将重用现有的 DOM 节点,而不是创建新节点-由 React 的虚拟 DOM 提供的优化,并由每个 React 开发人员批准。

Perf.printDOM()来方便地找到奇特,昂贵的浏览器奇数或监控主要,不可预测的DOM修改。

 

ReactJS Web 应用程序的综合监控

虽然上述方法是监视 React 应用程序性能不可或缺的方法,但它们无法模仿典型用户在使用应用程序时执行的操作。 综合监控平台
与脚本记录器相结合
,可以运行和重播预先录制的脚本,在真实浏览器中模拟用户事务和典型用户操作。 例如,基本导航、表单提交、购物车交易、在线游戏、滚动速度、动画等。

虽然 Perf 是一个很好的工具,用于监视渲染树和比较虚拟 DOM 与实际 DOM 时损失的时间量,但它不会转换为用户在使用应用程序时可能遇到的情况。 合成
Web 应用程序监视
解决方案(如
Dotcom-Monitor
提供的解决方案)包含一个易于使用的脚本工具来编写各种监视测试脚本。 这些脚本可以在私有测试环境中运行,并定期检查 Web 应用程序的各种参数。 使用使用真实浏览器的综合监视工具,您可以获得最准确的性能结果。

此外,可以使用不同的设备、浏览器和地理位置执行综合监视。 对于单页应用程序,初始页面加载速度不如最终用户体验重要。 不仅确保应用程序正常运行至关重要,而且还必须监视功能。 例如,用户可以执行必要的操作,以及导致延迟或问题的第三方服务或 API(如果有)。什么)。

Web 应用程序监视的目标是在问题影响更多用户之前自动识别问题。 通过综合监视,您可以根据特定 React 应用程序的要求设置警报,并在出现问题时立即收到通知。 与上面讨论的其他工具不同,合成监视采用主动方法,让您从您和您的团队必须运行手动测试的耗时过程中释放。

 

监控 ReactJS 应用:结论

虽然这些工具可用于在开发环境中监视 React 应用程序,但监视生产性能是另一个规模的挑战,并且具有更大的权重。 屈服于”在我的机器上工作”的心态是一个警示故事,当你的应用程序在生产中的表现受到威胁。 另一方面,合成监视工具从最终用户的角度为您提供性能报告,而不是从开发人员想象中的一些陈词滥调测试用例中为您提供性能报告。 然而,如果你正在寻找提高你的ReactJS性能监控,今天免费试用30天的Dotcom-Monitor。

 

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
电子邮件
Share on print
打印