程序员经验分享-hwhale

ExtJS 图表的性能比 FusionCharts 更好吗？

2024-01-02

我们正在考虑在应用程序中用 ExtJS 图表替换 FusionCharts，因为：

  1. 我们已经在整个 UI 中使用了 ExtJS。如果能够消除另一个商业第三方依赖项和 API 的开销和费用，那就太好了。
  2. 我们希望能够在无 Flash 的移动设备上显示这些图表。
  3. 扩展和管理 FusionCharts 的 Flash 组件比普通 DOM 对象要困难得多。
  4. 我们应用程序的一些特定页面充满了图表（大约有数百个类似火花的图表），而 Flash 正在吞噬内存，就像它已经过时了一样。

我研究过 FusionCharts 的 JavaScript 后备，它在美观上不够。另外，我不想要一个“后备”的 JavaScript 实现。

我们目前使用的是 ExtJS 3.2.0。短期内不可能升级到 4.x，但如果我们认为值得的话，我们可以将 Ext 4 沙箱化以仅使用其图表。

所以我的问题本质上是ExtJS 4 的 JavaScript 图表性能是否明显优于 FusionCharts Flash 图表？我最关心的是内存使用情况，其次是渲染时间。

I see 这个堆栈溢出问题 https://stackoverflow.com/questions/6910681/stock-chart-in-extjs-4这表明，至少截至 2011 年 8 月，Ext 图表还没有真正达到标准。我知道 Sencha 专注于提高 4.1 的稳定性和性能。有谁知道从那以后情况是否有所改善？


TL;DR

通过使用 ExtJS 4.0.7 中的图表（而不是 FusionCharts 3.2），我发现内存使用量、CPU 负载和渲染时间显着减少，通常减少了 70-85%。

Intro

我最近有时间测试 Ext 的图表。重写组件以将 Ext 4 图表集成到 Ext 3 面板中有点痛苦，但经过几天的工作，我可以绘制来自服务器的实际数据。

我试图解决的基本图表问题如下图所示：

我们绘制了设备上多个插座的功率读数趋势图。这在 FusionCharts 中运行良好，直到我们最近开始渲染具有 168 个插座的设备（并且可能在单个页面上显示多个这样的设备）。我怀疑没有浏览器能够处理那么多的 Flash，因此我构建了一个基本页面来渲染这些设备之一，并在几个不同的浏览器中对其进行了测试。

检测结果

“F”表示 FusionCharts。 “E”表示 ExtJS。

硬件：

  • OS X:15 英寸 MacBook Pro 5.1、2.4 GHz Intel Core 2 Duo、4 GB RAM
  • Win7:21 英寸 iMac 4.1、1.83 GHz Intel Core 2 Duo、2 GB RAM
  • WinXP:在 VirtualPC 中运行 XP 的相同 iMac（1 GB RAM）
=========
OS X 10.7
=========

Browser/Test    Real Mem (MB)     Virt Mem (MB)     Priv Mem (MB)     CPU (%)     Render (s)
--------------------------------------------------------------------------------------------

Chrome 17.0.963.56
F1              653               532               333                14         22.8
F2              648               535               336                15         22.7
F3              656               538               339                15         22.3
                ---               ---               ---               ---         ----
                652               535               336                15         22.6

E1              104               129                80                 0          4.0
E2              104               129                80                 0          4.7
E3              104               129                80                 0          3.7
                ---               ---               ---               ---         ----
                104               129                80                 0          4.1

+/-             -84%              -76%              -76%             -100%         -82%


Firefox 10.0.2
F1              905               450               257                14         10.1
F2              889               435               242                15         10.5
F3              889               465               272                15         10.1
                ---               ---               ---               ---         ----
                894               450               257                15         10.2

E1              239               230               161                 0          3.5
E2              256               215               177                 0          3.7
E3              253               218               181                 0          4.6
                ---               ---               ---               ---         ----
                249               221               173                 0          3.9

+/-             -72%              -51%              -67%             -100%         -62%


Safari 5.1.3
F1              1070              998               717                16         22.7
F2              1130              993               670                16         23.0
F3              1120              902               631                17         22.9
                ----              ---               ---               ---         ----
                1107              964               673                16         22.9

E1               153              290               125                 0          3.4
E2               153              291               125                 0          3.5
E3               153              291               125                 0          3.3
                ----              ---               ---               ---         ----
                 153              291               125                 0          3.4

+/-              -86%             -70%              -81%             -100%         -85%


=========
Windows 7
=========

Browser         Working Set (MB)    Priv Working Set (MB)     Commit Size (MB)    CPU (%)   Render (s)
------------------------------------------------------------------------------------------------------

Chrome 17.0.963.56
F1              638                 619                       633                  45       16.9
F2              639                 620                       633                  43       16.8
F3              639                 620                       633                  45       16.9
                ---                 ---                       ---                 ---       ----
                639                 620                       633                  45       16.9

E1              100                  85                        96                   0        4.4
E2               95                  81                        92                   0        4.5
E3              101                  87                        98                   0        4.3
                ---                 ---                       ---                 ---       ----
                 99                  84                        95                   0        4.4

+/-             -85%                -87%                      -85%               -100%       -74%


Firefox 10.0.2
F1              650                 638                       657                  52       11.5
F2              655                 641                       659                  54       16.9
F3              650                 638                       656                  52       11.4
                ---                 ---                       ---                 ---       ----
                651                 639                       657                  52       13.3

E1              138                 111                       119                   0        3.6
E2              141                 113                       121                   0        3.6
E3              134                 106                       114                   0        3.8
                ---                 ---                       ---                 ---       ----
                138                 110                       118                   0        3.6

+/-             -79%                -83%                      -82%               -100%       -73%


IE 9.0.8112.16421
F1              688                 660                       702                  19       13.1
F2              645                 617                       661                  16       19.0
F3              644                 615                       660                  15       19.0
                ---                 ---                       ---                 ---       ----
                659                 631                       674                  17       17.0

E1              100                  73                        90                   0        4.8
E2               98                  73                        90                   0        4.5
E3               99                  73                        90                   0        4.3
                ---                 ---                       ---                 ---       ----
                 99                  73                        90                   0        4.5

+/-             -85%                -88%                      -87%               -100%       -74%


==========
Windows XP
==========

Browser/Test    Mem Usage (MB)      Virt Mem Usage (MB)     CPU (%)   Render (s)
--------------------------------------------------------------------------------

IE 8.0.6001.18702
F1              653                 658                      56       19.5
F2              652                 658                      58       19.6
F3              652                 658                      60       18.9
                ---                 ---                     ---       ----
                652                 658                      58       19.3

E1              272                 266                       2       38.5
E2              271                 266                       2       37.4
E3              271                 266                       2       37.3
                ---                 ---                     ---       ----
                271                 266                       2       37.7

+/-             -58%                -60%                    -97%       +95%


IE 7.0.5730.13
F1              721                 726                      80       29.1
F2              691                 698                      75       25.9
F3              695                 698                      78       27.0
                ---                 ---                     ---       ----
                702                 707                      78       27.3

E1              302                 294                       1       67.4
E2              301                 294                       0       66.5
E3              301                 294                       0       65.8
                ---                 ---                     ---       ----
                301                 294                       0       66.6

+/-             -57%                -68%                   -100%      +144%

Notes:

- CPU (%) was measured once the charts had finished rendering and
  the browser was idling.
- Render (s) was the time measured between when the data finished
  loading and when the charts were fully rendered and usable.

结论

除了 IE8 和 IE7 上的渲染时间之外，在每个指标中，ExtJS 图表都大幅优于 FusionCharts。尽管这些测试是针对我们的用例的，但我希望在类似的情况下看到类似的（如果不那么剧烈）结果——即单个页面上有很多图表。

这更不用说原生图表的质量优势，例如真正的 DOM 脚本和样式、与 ExtJS 框架其余部分的直接集成以及在无 Flash 移动设备上访问图表。如果您能投入时间，在 Ext 4 中绘制图表将是一个巨大的胜利。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ExtJs

FusionCharts

ExtJS 图表的性能比 FusionCharts 更好吗？ 的相关文章

  • Extjs 4.2 缓冲存储同步数据不起作用

    这是商店代码 Ext define NG store WhatsNews extend NG store AbstractStore model NG model auxClasses notifications WhatsNew alia

  • 查询具有特定 xtype 的子组件

    有没有一种方法可以查询 xtype yourxtype 的子组件 例如 您有一个面板 该面板内部是位于工具栏上的自定义 xtype findParentByType 非常适合查找 但没有像 findChildByType 这样的方法 并且

  • 当另一个下拉列表中的值发生变化时加载一个下拉列表的存储

    我有 2 个下拉菜单 根据在一个下拉列表中选择的值 我需要使用 JSON 进行 AJAX 调用来检索值并在其他下拉列表中可用 这需要在 EXTJS 中完成 我尝试了以下代码 FUNCTION NAME Field on select fun

  • 如何使 extjs 手风琴垂直滚动

    在这里摆弄 https fiddle sencha com fiddle 5gv 如果手风琴中有很多面板 它们就会在垂直方向上相互碰撞 并且无法扩展 我想让手风琴的总高度等于标题的高度加上一个面板主体的高度 展开 然后父面板应该只有一个滚动

  • ExtJS TreeGrid 中的复选框列

    有没有办法在新的 extjs 小部件 TreeGrid 中包含复选框列 将节点属性标记为 false true 并不像 TreePanel 那样有效 Cheers 我修改了 Ext ux tree TreeGridNodeUI 类来实现此功

  • 单击父节点时检查树的子节点 [ExtJS]

    我想知道如何在单击 ExtJs 中的特定节点时检查树的同级节点 我已经给了每个节点的 id 我可以访问单击的节点的 id 那么我如何继续自动检查子节点 有人请帮助我 or any other way of getting hands on

  • Sencha Cmd v4.0.2.67 创建后台进程失败

    我有一个使用 Sencha Command v4 0 2 67 生成的单页 ExtJS 应用程序 我正在尝试使用 Sencha Command v4 0 2 67 和以下命令进行构建 sencha app refresh sencha ap

  • 如何使用 Sencha Touch 数据模型读取嵌套 JSON 结构？

    我整个晚上都在试图解决这个问题 但没有成功 我有一个 JSON 结构如下 来自另一个系统 所以我无法更改其结构 parents parent parentId 1 children child childId 1 ch

  • ExtJS EditorGridPanel 中的级联组合框

    我有一个正在运行的 EditorGrid 面板 其中两列有 ComboBox 编辑器 两个组合框都是从数据库远程加载的 countryStore and cityStore 我想限制cityComboBox仅显示所选国家 地区的城市 我需要

  • 错误“达到 inotify 监视的用户限制”。 ExtReact 构建

    我安装了 ExtReact 并附有示例 当我跑步时 npm start 我收到错误 ERROR in extjs reactor webpack plugin Error ERR BUILD FAILED ERR com sencha ex

  • 无法加载所需框架：extjs 中的 ext@null

    设置 extjs 和 sencha 当我运行应用程序时出现错误无法加载所需的框架 root samuel pc Documents code test sencha app watch Sencha Cmd v6 5 0 180 ERR U

  • 如何确定 ExtJS 4 中 Ext.grid.Panel 的选定单元格？

    我如何获取 Ext grid Panel 的选定单元格 在 ExtJS 3 中可以通过以下方式实现 grid getSelectionModel getSelectedCell 在分机4中有 grid getSelectionModel s

  • ExtJS打开窗口的最大高度

    我试图通过单击按钮 Ext Button 来打开一个窗口 Ext Window 问题是该窗口的尺寸必须为用户屏幕的 80 宽度和 100 高度 即它应该覆盖所有垂直空间 我真的无法创建一个工作示例 我使用的按钮是隐藏 显示这个窗口 它的大小

  • 如何删除控制器ExtJS？

    我在应用程序中动态创建控制器 如下所示 var loadedController me app getController controller name loadedController init 使用后如何删除该控制器 谢谢 ExtJs

  • ExtJS4：从 Ext.Application 访问全局变量

    我想加载一些应用程序特定的设置 并在加载应用程序时将它们保存为全局变量 我找到了如何创建和访问全局变量here https stackoverflow com questions 11615277 setting and accessing

  • NGINX 和 Spark Java 之间的跨源通信

    我正在将 NGINX 和 Sparkjava 用于我的 Web 应用程序 我确信我已正确启用所有 CORS 标头 尽管如此 我还是得到了 XMLHttpRequest 无法加载http localhost 3003 platformAPI

  • Extjs Restful Store，批量发送请求？

    我创建了一个带有商店配置的网格组件 如下所示 Create the store config store new Ext data Store restful true autoSave false batch true writer ne

  • Extjs 4.0.7，编辑器网格 - 如何获取更新的单元格值？

    我需要在控制器中获取 检索 更新的单元格值 MVC 所以我尝试了这个 var modified this getItemGrid getStore getUpdatedRecords console log modified return

  • 突出显示 extjs4 折线图的一部分

    在 extjs 4 1 1a 中 下面的代码是折线图的工作示例 现在我需要在给定的最小和最大时间戳上突出显示该图表的一部分 xtype chart store ChartData height 100 width 100 legend po

  • 如何在 Ext.form.TextField 中显示/隐藏密码

    您能告诉我如何在单击另一个按钮时显示 隐藏密码字段的输入文本吗 我尝试更改该文本字段的 inputType 属性 但它是在当时渲染的 因此没有影响 另一种方法是创建 2 个文本字段并使其可见 不可见 但我不喜欢这样做 因为它看起来像作弊 预

随机推荐

热门标签