从vue迁移到react_从AngularJS迁移到React-您如何衡量性能提升？

从vue迁移到react

by Gupta Garuda

通过古普塔·歌鲁达(Gupta Garuda)

从AngularJS迁移到React-您如何衡量性能提升？ (Migrating from AngularJS to React — how do you measure your performance gains?)

Are you looking into migrating a large AngularJS single page application to React? If so, you may be wondering what sort of performance gains you are going to get with React and how the code will morph (with state management libraries Redux or Mobx).

您是否正在考虑将大型AngularJS单页应用程序迁移到React？ 如果是这样，您可能想知道React将带来什么样的性能提升以及代码将如何变形(使用状态管理库Redux或Mobx)。

In this post, I’ll try to answer some of these questions, and give you a lot of data you can use to make more informed decisions.

在本文中，我将尝试回答其中的一些问题，并为您提供大量可用于做出更明智决策的数据。

First, I will go over the performance and memory profiles of various UI scenarios implemented using AngularJS, React/Redux and React/Mobx. We will compare and contrast the performance of these frameworks on measures like script execution time, frames per sec, and usedJSHeapSize for each scenario.

首先，我将介绍使用AngularJS，React / Redux和React / Mobx实现的各种UI场景的性能和内存配置文件。 我们将在每种情况下在脚本执行时间，每秒帧数和usedJSHeapSize等指标上比较和对比这些框架的性能。

I provided the links to the test pages and source code so you can try out those scenarios and can review the code to get a feel for constructs that React (with Redux or Mobx) will bring to the table.

我提供了指向测试页面和源代码的链接，因此您可以尝试这些场景并可以查看代码，以使React(带有Redux或Mobx)将带到表中的构造有个感觉。

性能测试设置 (Performance test setup)

To evaluate the performance of AngularJS and React, I created a benchmark application, a stock ticker dashboard. This application shows a list of stocks and has some controls to automate UI test actions. For each stock, the application shows the ticker symbol, company name, sector name, current price, volume and simple moving averages (10 days, 50 days and 200 days), and a visual indicator showing whether the price went up or down. The test dataset consists of 5000 stock tickers and is loaded during the page load via a script tag.

为了评估AngularJS和React的性能，我创建了一个基准应用程序，一个股票行情显示板。 该应用程序显示了股票列表，并具有一些控件来自动执行UI测试操作。 对于每只股票，应用程序均显示股票代码，公司名称，行业名称，当前价格，交易量和简单移动平均线(10天，50天和200天)，以及直观的指示器，显示价格是涨还是跌。 测试数据集由5000个股票行情自动收录器组成，并在页面加载期间通过脚本标签加载。

I created three versions of this application using AngularJS, React/Redux, and React/Mobx. This enables us to easily compare the performance metrics for each scenario across the frameworks.

我使用AngularJS，React / Redux和React / Mobx创建了该应用程序的三个版本。 这使我们能够轻松比较跨框架的每个方案的性能指标。

测试方案 (Test Scenarios)

• Switching views

  切换检视

  We navigate through a list of 5000 stock tickers showing 150 tickers at a time every 0.5sec. This scenario measures how quickly the framework can update the view when the visible collection data model changes.

  我们浏览5000个股票行情清单，每0.5秒一次显示150个股票行情。 此方案测量可见集合数据模型更改时框架更新视图的速度。

  Real world use-case: route changes, paging through a listview, virtual scroll, and so on.

  现实中的用例：路由更改，通过列表视图进行分页，虚拟滚动等。

• Adding tickers

  添加股票行情

  We add 50 tickers to the visible collection every 100ms until we show the entire collection of 5000 tickers. This scenario measures how quickly the framework can create new items. Showing 5000 tickers is not a realistic scenario, but we can visualize the limits where things will fall apart with each framework.

  我们每100ms向可见的集合中添加50个标记，直到显示5000个标记的整个集合。 此方案测量框架可以多快地创建新项目。 显示5000个报价不是现实的情况，但是我们可以可视化每个框架将崩溃的限制。

  Real world use-case: Pinterest style infinite scroll where new UI elements are added to the DOM as the user scrolls.

  现实中的用例：Pinterest样式的无限滚动，其中在用户滚动时将新的UI元素添加到DOM。

• Quick Updates on Price/Volume

  价格/数量快速更新

  We render 1500 tickers and start updating price/volume data for random tickers once every 10ms. This scenario measures how quickly frameworks can apply the partial updates to the UI.

  我们渲染1500个股票，并开始每10ms更新一次随机股票的价格/交易量数据。 此方案测量框架可以多快将部分更新应用于UI。

  Real world use-case: updates to presence indicators, likes, retweets, claps, stock prices, and so on.

  现实世界的用例：状态指示器的更新，如赞，转发，拍手，股票价格等。

• Removing tickers

  删除股票行情

  We will first add all 5000 tickers and then start removing 50 tickers from the visible collection once every 100ms.

  我们将首先添加所有5000个股票，然后开始每100ms从可见集合中删除50个股票。

链接到测试页和源 (Links to test pages and source)

All the examples are written in Typescript and the compilation/bundling is done using Webpack. The Readme page for source URL lists the instructions to build and run the applications.

所有示例均以Typescript编写，并且使用Webpack进行了编译/捆绑。 源URL的自述页面列出了构建和运行应用程序的说明。

• AngularJS — https://guptag.github.io/js-frameworks/AngularJS/examples/angularjs-perf-test/index.html (Source)

  AngularJS- https ://guptag.github.io/js-frameworks/AngularJS/examples/angularjs-perf-test/index.html( 源 )

• React/Redux — https://guptag.github.io/js-frameworks/Redux/examples/redux-perf-test/index.html

  React / Redux- https: //guptag.github.io/js-frameworks/Redux/examples/redux-perf-test/index.html

  (

  (

  Source)

  来源 )

• React/Mobx — https://guptag.github.io/js-frameworks/Mobx/examples/mobx-perf-test/index.html

  React / Mobx- https: //guptag.github.io/js-frameworks/Mobx/examples/mobx-perf-test/index.html

  (

  (

  Source)

  来源 )

在我们开始之前... (Before we start…)

• All the below metrics are measured on Win10/Intel Xeon E5 @ 2.4GHz, 6 core, 32GB desktop with Chrome browser v60. The numbers will change on different machines/browsers.
  以下所有指标均在Win10 / Intel Xeon E5 @ 2.4GHz，6核，32GB台式机和Chrome浏览器v60上进行测量。 数字将在不同的机器/浏览器上改变。

• To see the accurate heap memory data on the test pages, open Chrome with ‘--enable-precise-memory-info’ flag.

  要在测试页上查看准确的堆内存数据，请使用' --enable-precise-memory-info '标志打开Chrome。

• React is a library rather than a full-fledged framework like AngularJS. In this post, I used the term framework for simplicity.
  React是一个库，而不是像AngularJS这样的成熟框架。 在本文中，为简单起见，我使用了术语框架。

• Test pages show live JavaScript heap size as Memory.

  测试页将实时JavaScript堆大小显示为“内存”。

  About javascript heap size: In Chrome TaskManager,

  关于javascript堆大小：在Chrome TaskManager中，

In Chrome TaskManager, “The Memory column represents native memory. DOM nodes are stored in native memory. If this value is increasing, DOM nodes are getting created. The JavaScript Memory column represents the JS heap. This column contains two values. The value you’re interested in is the live number (the number in parentheses). The live number represents how much memory the reachable objects on your page are using. If this number is increasing, either new objects are being created, or the existing objects are growing. From Fix Memory Issues by Kayce Basques

在Chrome TaskManager中，“ 内存列代表本机内存。 DOM节点存储在本机内存中。 如果此值增加，则将创建DOM节点。 JavaScript内存列代表JS堆。 此列包含两个值。 您感兴趣的值是实时数字(括号中的数字)。 实时数字表示页面上的可访问对象正在使用的内存量。 如果此数目增加，则说明正在创建新对象，或者现有对象正在增加 。 凯西·巴斯克(Kayce Basques)的修复内存问题

• About Frames per second:
  关于每秒帧数：

Most devices today refresh their screens 60 times a second. If there’s an animation or transition running, or the user is scrolling the pages, the browser needs to match the device’s refresh rate and put up one new picture, or frame, for each of those screen refreshes. Each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms). In reality, however, the browser has housekeeping work to do, so all of your work needs to be completed inside 10ms. When you fail to meet this budget, the frame rate drops, and the content judders on screen. This is often referred to as jank, and it negatively impacts the user’s experience. From Rendering Performance by Paul Lewis

如今，大多数设备每秒刷新屏幕60次。 如果正在运行动画或过渡，或者用户正在滚动页面，则浏览器需要匹配设备的刷新率，并为每个屏幕刷新放置一张新图片或一帧。 这些帧中的每个帧的预算刚好超过16毫秒(1秒/ 60 = 16.66毫秒)。 但是，实际上，浏览器需要执行客房整理工作，因此您的所有工作都需要在10毫秒内完成。 如果您无法满足此预算，则帧速率会下降，并且内容闪烁。 这通常称为垃圾邮件，会对用户的体验产生负面影响。 从保罗·刘易斯的渲染表现

DOM-AngularJS组件与React组件 (DOM - AngularJS Components vs. React Components)

AngularJS directives (or components) create an extra wrapper element around the template. For simple views, this is not an issue. However, in complex views containing a large number of directives (especially when they are repeated within ng-repeat), all the extra elements will add up to the total size of the DOM tree — potentially impacting memory, selector performance, and so on.

AngularJS指令(或组件)在模板周围创建了一个额外的包装器元素。 对于简单的视图，这不是问题。 但是，在包含大量指令的复杂视图中(尤其是在ng-repeat中重复执行这些指令时)，所有额外的元素加起来将达到DOM树的总大小-可能会影响内存，选择器性能等。

Although you can set ‘replace=true’ property to disable rendering the wrapper element, it causes a bunch of issues and is currently marked as deprecated.

尽管您可以设置'replace = true'属性以禁用呈现wrapper元素，但它会引起很多问题，并且当前标记为deprecated 。

Here is the rendered HTML for the ticker component in AngularJS:

这是AngularJS中股票行情显示组件的渲染HTML：

Here is rendered HTML for the similar ticker component in React:

这是React中类似的代码组件的呈现HTML：

In our specific example, AngularJS created an additional 1400 DOM nodes compared to React for rendering the same number of tickers (200).

在我们的特定示例中，与React相比，AngularJS创建了额外的1400个DOM节点来渲染相同数量的代码(200个)。

方案1-切换视图 (Scenario 1 — Switching Views)

We navigate through a list of 5000 tickers showing 150 tickers at a time every 0.5sec.

我们浏览5000个滴答声的列表，每0.5秒一次显示150个滴答声。

The below chart plots the script execution time for each refresh from Chrome’s performance timeline. AngularJS consistently took >200ms to delete the existing 150 tickers and to show the new ones. Whereas React/Redux did the same work within 90–100ms (half the time compared to ng1). The React/Mobx version took slightly more time than the Redux version, but not far from it.

下表绘制了Chrome性能时间轴上每次刷新的脚本执行时间。 AngularJS持续花费200毫秒以上的时间来删除现有的150个股票并显示新的股票。 而React / Redux在90-100ms内完成了相同的工作(与ng1相比，时间缩短了一半)。 React / Mobx版本比Redux版本花费了更多时间，但相差不远。

The below chart shows the frames per sec(fps) as the refresh happens. The Redux and Mobx versions stayed around 45fps whereas AngularJS stayed around 30 fps during the entire run.

下表显示了刷新发生时的每秒帧数(fps)。 在整个运行过程中，Redux和Mobx版本保持大约45 fps，而AngularJS保持大约30 fps。

内存和GC暂停 (Memory & GC pauses)

The below chart shows the JavaScript heap size (‘usedJSHeapSize’) measured during the refresh. Both the AngularJS and Mobx versions showed a staircase pattern for the memory consumption, indicating that Chrome kicked in the GC to reclaim the memory. The Redux version is super consistent with its low memory profile all throughout the run.

下表显示了刷新期间测量JavaScript堆大小(“ usedJSHeapSize”)。 AngularJS和Mobx版本都显示了内存消耗的阶梯模式，表明Chrome浏览器加入了GC以回收内存。 在整个运行过程中，Redux版本与其低内存配置文件非常一致。

Let’s closely look into the timeline profiles for all the three versions.

让我们仔细查看所有三个版本的时间线配置文件。

AngularJS execution caused several GC pauses as the ticker list gets refreshed. V8 tries to hide GC pauses by scheduling them during the unused chunks of idle times to improve the UI responsiveness. Contrary to this ideal behavior, GC pauses happened during the script execution contributing to the overall execution time.

随着股票清单的刷新，AngularJS的执行导致了几次GC暂停。 V8尝试通过在未使用的空闲时间块中安排GC暂停来隐藏GC暂停，以提高UI响应能力 。 与这种理想行为相反，GC暂停在脚本执行期间发生，这占了整个执行时间。

The Redux performance profile shows no GC pauses whatsoever during the script execution.

Redux性能配置文件显示在脚本执行过程中，GC均未暂停。

The Mobx profile shows few GC pauses, but not as many as the AngularJS version.

Mobx配置文件显示的GC暂停很少，但不如AngularJS版本那么多。

方案2-添加股票行情 (Scenario 2 — Adding Tickers)

We will add 50 tickers to the visible collection every 100ms until we show all the tickers. The result of showing all 5000 tickers is not a realistic scenario, but it would be interesting to see how each framework handles it.

我们将每100毫秒将50个股票添加到可见集合中，直到我们显示所有股票。 显示所有5000个标记的结果不是现实的情况，但是看看每个框架如何处理它会很有趣。

The below chart plots the script execution time from Chrome’s performance timeline. In the case of AngularJS, the script execution time linearly increased as more and more tickers were added to the page. AngularJS took more time to add new tickers right from the start compared to the other versions.

下图从Chrome的性能时间表绘制了脚本执行时间。 对于AngularJS，随着越来越多的代码添加到页面中，脚本执行时间线性增加。 与其他版本相比，AngularJS从一开始就花费了更多时间来添加新的代码。

Interestingly, the Redux and Mobx versions show impressive performance even towards the right side of the chart with thousands of tickers on the page. React’s virtual DOM diffing algorithm is showing its strength compared to AngularJS’s dirty checking.

有趣的是，Redux和Mobx版本甚至在图表的右侧也显示了令人印象深刻的性能，页面上有成千上万的报价。 与AngularJS的脏检查相比，React的虚拟DOM差异算法正在展示其优势。

With AngularJS, adding new items caused jank in the browser right from the start (red bars) and the number of frames per second dropped from 60 early on and never recovered (green area) during the entire add operation.

使用AngularJS，添加新项会从一开始就在浏览器中造成锯齿(红色条)，并且每秒帧数从60早就下降，并且在整个添加操作期间从未恢复(绿色区域)。

Redux created jank once early-on, but it is all clear until we crossed the halfway point of adding new tickers. FPS also nicely recovered to 60 in between the add operations.

Redux早些时候就创建了jank，但直到我们超过添加新的代码的中间点时，一切都是清楚的。 在添加操作之间，FPS也很好地恢复到60。

Mobx caused jank few times more times than Redux, but nowhere close to AngularJS.

Mobx造成jank的次数是Redux的几倍，但远不及AngularJS。

内存和GC事件 (Memory & GC events)

Redux consumed about half the heap size as AngularJS during the entire run. Mobx stayed in between.

在整个运行过程中，Redux消耗的堆大小约为AngularJS的一半。 Mobx停留在两者之间。

Adding new tickers also triggered some GC pauses with AngularJS (almost once with every add operation). Redux triggered fewer GC pauses overall. Mobx started to trigger more GC pauses towards the end as we added more and more tickers to the list.

添加新的代码也触发了AngularJS的GC暂停(每次添加操作几乎都暂停了一次)。 Redux总体上触发了较少的GC暂停。 随着我们在列表中添加越来越多的行情收录器，Mobx开始在结尾处触发更多的GC暂停。

方案3-快速更新价格/数量 (Scenario 3 — Quick Updates to Price/Volume)

This is the most common scenario in the real-time applications. Once the view is rendered, there will be a quick succession of updates coming into the application either via web-sockets, xhr calls, and so on. Imagine the use-cases like presence updates, stock price changes, likes/retweets/claps count changes, and more. Let’s see how each framework fares in this scenario.

这是实时应用程序中最常见的情况。 呈现视图后，将通过Web套接字，xhr调用等快速连续地将更新引入应用程序。 想象一下用例，例如状态更新，股价变化，点赞/转发/拍张数量更改等。 让我们看看每种框架在这种情况下的表现。

All the below metrics are taken with 1500 tickers on the page and when price/volume changes are happening every 10ms.

以下所有指标都是在页面上以1500个滴答作响的，并且每10毫秒发生一次价格/数量变化。

AngularJS again struggled to keep up with the updates happening in quick succession. Script execution for each update took about 35ms. Redux took 6ms to update the view. Mobx shines, updating the view within 2ms. Mobx’s derivation graph knows exactly which component to update based on which observable’s state is changed.

AngularJS再次努力跟上快速连续更新的步伐。 每次更新的脚本执行大约需要35毫秒。 Redux用了6毫秒来更新视图。 Mobx发光，在2ms内更新视图。 Mobx的推导图可根据更改的可观察状态准确地知道要更新的组件。

Here are the timeline profiles showing the script execution for each version.

以下是时间轴配置文件，显示了每个版本的脚本执行情况。

FPS consistently stayed at 60 with Redux and Mobx, whereas it hovered a little below 30 with AngularJS.

Redux和Mobx的FPS始终保持在60，而AngularJS则保持在30以下。

方案4-删除股票代码 (Scenario 4 — Deleting Tickers)

We will add all 5000 tickers to the page and start removing 50 tickers from the visible collection every 100ms.

我们将向页面添加所有5000个标记，并开始每100毫秒从可见集合中删除50个标记。

The below images show the performance profile of the initial delete iterations. AngularJS is almost 4x slower compared to React versions. Redux and Mobx took a little more time in the initial iterations but settled between 50–70ms for each delete operation.

下图显示了初始删除迭代的性能概况。 与React版本相比，AngularJS几乎慢了4倍。 Redux和Mobx在最初的迭代中花费了一些时间，但每次删除操作的时间在50-70ms之间。

It’s pretty clear from all the above tests that React gives significant performance gains when compared with AngularJS.

从以上所有测试中可以很明显地看出，与AngularJS相比，React可以显着提高性能。

As the applications grow bigger and views get more complex, the runtime profile of the frameworks starts to differ in their various ways. Our objective was to replicate the scenarios we were targeting for, measure the performance/memory impact, and look at the pro/cons of the constructs with each framework.

随着应用程序的增长和视图的复杂化，框架的运行时配置文件开始以各种方式出现差异。 我们的目标是复制我们要针对的场景，衡量性能/内存影响，并查看每个框架的构造的利弊。

Even with the most performant framework out there, we still need to apply a lot of discipline and follow the right patterns to make the applications scalable and performant.

即使有最高性能的框架，我们仍然需要运用大量的纪律并遵循正确的模式以使应用程序具有可扩展性和高性能。

I go over the core concepts, benefits, and gotchas of Redux and Mobx in a separate post.

我将在另一篇文章中介绍Redux和Mobx的核心概念，优势和陷阱。

Thanks for reading. Hope this is helpful.

谢谢阅读。 希望这会有所帮助。

P.S. Thanks to Shyam Arjarapu and Adam Carr for reviewing this article.

PS感谢Shyam Arjarapu和Adam Carr审阅了本文。

翻译自: https://www.freecodecamp.org/news/measuring-performance-gains-angularjs-to-react-with-redux-or-mobx-fb221517455/

从vue迁移到react