TL; DR
Я наблюдал феноменальное сокращение использования памяти, загрузки процессора и времени рендеринга при использовании диаграмм в ExtJS 4.0.7, а не в FusionCharts 3.2, обычно на 70–85%.
Введение
Недавно у меня появилось время для тестирования графиков Ext. Было немного больно переписывать компоненты, чтобы интегрировать диаграммы Ext 4 в панели Ext 3, но, потратив на это несколько дней, я мог получать реальные данные с сервера.
Основная проблема с графиком, которую я пытался решить, показана на рисунке ниже:
Мы строим график показаний мощности для ряда розеток на устройстве. Это хорошо работало в FusionCharts, пока недавно мы не начали рендеринг устройств с 168 выходами (и, возможно, несколькими из этих устройств на одной странице). Я подозревал, что ни один браузер не сможет обработать столько Flash, поэтому я создал базовую страницу для рендеринга одного из этих устройств и протестировал ее в нескольких разных браузерах.
Результаты испытаний
«F» означает FusionCharts. «E» означает ExtJS.
Оборудование:
- OS X: 15-дюймовый MacBook Pro 5,1, 2,4 ГГц Intel Core 2 Duo, 4 ГБ ОЗУ
- Win7: 21-дюймовый iMac 4,1, 1,83 ГГц Intel Core 2 Duo, 2 ГБ ОЗУ
- WinXP: тот же iMac под управлением XP в VirtualPC (1 ГБ ОЗУ)
=========
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 - это огромный выигрыш.