ExtJS图表的表现优于FusionCharts？ [英] Do ExtJS charts perform better than FusionCharts?
问题描述
我们正在考虑在我们的应用程序中使用ExtJS图替换FusionCharts，因为：
We're thinking about replacing FusionCharts with ExtJS charts in our application, since:
- 我们已经在整个UI中使用ExtJS。删除另一个商业第三方依赖关系和API的开销和费用是很好的。
- 我们希望能够在无Flash手机上显示这些图表。 / li>
- 扩展和管理FusionCharts的Flash组件比普通DOM对象要困难得多。
- 我们的应用程序的几个特定页面充满了图表在数百个火花般的图表的数量级），而Flash是像它的风格一样吞噬着记忆。
我有看了FusionCharts的JavaScript回退，只是没有美感。此外，我不想要一个后备的JavaScript实现。
I've looked at FusionCharts's JavaScript fallback, and it's just not aesthetically sufficient. Plus, I don't want a JavaScript implementation that's a "fallback".
我们目前在ExtJS 3.2.0。升级到4.x是短期的问题，但是如果我们认为值得付出努力，我们可能会使用四四来使用它的图表。
We're currently on ExtJS 3.2.0. Upgrading to 4.x is out of the question for the short term, but we could potentially sandbox Ext 4 to use just its charting if we deem it worth the effort.
所以我的问题基本上是，ExtJS 4的JavaScript图表是否比FusionCharts Flash图表显着更好？我主要关心内存使用，其次是渲染时间。
So my question is essentially does ExtJS 4's JavaScript charting perform significantly better than FusionCharts Flash charting? I'm mostly concerned with memory usage, secondarily with render time.
我看到此堆栈溢出问题表示，至少截至2011年8月，Ext图表并没有真正达到鼻烟。我知道Sencha集中精力在4.1中提高稳定性和性能。有谁知道自那以后是否更好？
I see this Stack Overflow question indicating that, at least as of August 2011, Ext charts weren't really up to snuff. I know Sencha was concentrating on improving stability and performance in 4.1. Does anyone know if it's gotten better since then?
推荐答案
TL; DR
通过使用ExtJS 4.0.7而不是FusionCharts 3.2中的图表，我看到内存使用量，CPU负载和渲染时间显着减少，通常为70-85％。
TL;DR
I saw phenomenal reductions in memory usage, CPU load, and render time by using charts in ExtJS 4.0.7 rather than FusionCharts 3.2, usually on the order of 70–85%.
我最近有一段时间来测试Ext的图表。将Ext 4图表整合到Ext 3面板中，轻轻地痛苦地重写组件，但是在几天的工作中，我可以从服务器上绘制实际数据。
I recently got some time to test Ext's charting. It was mildly painful rewriting the components to integrate Ext 4 charts into Ext 3 panels, but with few days' work, I could chart actual data from the server.
我试图解决的图表问题如下图所示：
The basic charting problem I was trying to solve is shown in the image below:
我们列出了设备上许多插座的功率读数趋势。这在FusionCharts中工作得很好，直到我们最近开始使用168个插座（并且在单个页面上可能使用这些设备中的几个）来渲染设备。我怀疑没有浏览器能够处理这么多的Flash，所以我建立了一个基本页面来渲染这些设备，并在几个不同的浏览器中进行了测试。
We chart a trend of power readings for a number of outlets on a device. This worked fine in FusionCharts until we recently we started rendering devices with 168 outlets (and potentially several of these devices on a single page). I suspected that no browser would be able to handle that much Flash, so I built a basic page to render one of these devices and tested it in a few different browsers.
F表示FusionCharts。 E表示ExtJS。
"F" means FusionCharts. "E" means ExtJS.
硬件：
- ： 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：相同的iMac在VirtualPC（1 GB RAM）中运行XP
- OS X: 15-inch MacBook Pro 5,1, 2.4 GHz Intel Core 2 Duo, 4 GB RAM
- Win7: 21-inch iMac 4,1, 1.83 GHz Intel Core 2 Duo, 2 GB RAM
- WinXP: same iMac running XP in VirtualPC (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。虽然这些测试是针对我们的用例的，但我会期望在类似的情况下看到类似的（如果不那么激烈）的结果 - 即在一个页面上的许多图表。
Conclusions
In every metric other than render time on IE8 and IE7, ExtJS charts outperformed FusionCharts by a wide margin. Although the tests were specific to our use case, I would expect to see similar (if less drastic) results in similar situations — i.e., lots of charts on a single page.
这并不表示本地图表的质量优势，如真正的DOM脚本和样式，与ExtJS框架的其他部分直接集成，以及访问无Flash移动设备上的图表。如果您可以投资时间，在Ext 4中绘图是一个巨大的胜利。
This is to say nothing of the qualitative benefits of native charts, like real DOM scripting and styling, direct integration with the rest of the ExtJS framework, and access to charts on Flash-less mobile devices. If you can invest the time, charting in Ext 4 is a huge win.
这篇关于ExtJS图表的表现优于FusionCharts？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
