Performance issues on Safari, Mobile Safari, and Android browsers

[stepheneb]

We've implemented an open source HTML5 2D Molecular Dynamics simulation framework and are using SVG and D3.js to render the particles.

Performance is reasonable but there has recently been a terrible SVG performance regression in Firefox.

So we wrote a simple benchmark test to help us evaluate Pixi.js, KineticJS) + Shape Caching, and SVG using D3.js

The results were very confusing ... I'm sharing this here because I thought you would be interested ... in general Pixi.js is very good ...but also there seems to serious relative performance issues on Safari, Mobile Safari, and Android browsers.

Here are the three versions of the benchmark test:

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer

Anyway here's the very confusing "executive summary" ... following this are the data I collected if you want to dig deeper.

I've collected performance data from three of Piotr's red-circle animation benchmarks from iPad, Android, Mac OS X 10.6.8, 10.8.3, and Windows 7.

Tested on all platforms:

• D3 SVG request AnimationFrame
• Canvas KineticJS + Shape Caching
• Pixi.js Canvas Renderer

The results are bizarre.

The only consistent results are where WebGL is available Pixi.js WebglRenderer is the fastest by far.

On all the Safari-based browsers (including Mobile Safari on the iPad) the D3 SVG rendering is faster.

Chrome on Android was recently updated from v18 to v25. Chrome v25 now appears to be at least three times slower rendering SVG than Chrome 18.

The stock Android browser is 3x faster rendering SVG than Chrome 25.

On all versions of Safari the Pixi.js Canvas renderer is much slower than than Canvas KineticJS + Shape Caching.

On all the other browsers the Pixi.js Canvas renderer is much faster than Canvas KineticJS + Shape Caching.

EXCEPT on the stock Android browser where the Pixi.js Canvas renderer is 4x slower than Canvas KineticJS + Shape Caching.

On all versions of Firefox Pixi.js CanvasRenderer is much faster than Canvas KineticJS + Shape Caching which in turn is much faster than D3 SVG request AnimationFrame.

On all versions of Chromw (except on Android) Pixi.js CanvasRenderer is about twice as fast as either Canvas KineticJS + Shape Caching or D3 SVG request AnimationFrame (which are about the same).

---

Mac OS X 10.6.8, Chrome 27.0.1452.0 canary

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  57.43   17.41
50  59.67   16.76
150 59.55   16.79
250 48.65   20.55
500 27.25   36.70
750 18.58   53.83

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  55.74   17.94
50  57.67   17.34
150 58.66   17.05
250 53.92   18.55
500 28.36   35.27
750 19.93   50.19

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
--- error ---

http://bl.ocks.org/pjanik/5238326
Pixi.js WebGLRenderer
Circles FPS repaint [ms]
--- error ---


Windows 7, Firefox Nightly 22.0a1 (2013-03-25)

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  58.92   16.97
50  59.24   16.88
150 39.22   25.50
250 26.92   37.15
500 14.61   68.45
750 9.85    101.47

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  59.59   16.78
50  59.29   16.87
150 50.47   19.81
250 32.33   30.93
500 17.24   58.00
750 11.86   84.31

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  48.00   20.83
50  59.57   16.79
150 59.01   16.95
250 59.48   16.81
500 49.07   20.38
750 34.90   28.65
5000    6.16    162.24

http://bl.ocks.org/pjanik/5238326
Pixi.js WebGLRenderer
Circles FPS repaint [ms]
25  56.58   17.67
50  59.55   16.79
150 59.15   16.91
250 59.17   16.90
500 59.15   16.91
750 59.57   16.79
5000    41.53   24.08

Mac OS X 10.6.8, Chrome 25.0.1364.99

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  55.97   17.87
50  59.62   16.77
150 59.64   16.77
250 44.29   22.58
500 26.57   37.64
750 17.99   55.59

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  49.34   20.27
50  59.27   16.87
150 58.96   16.96
250 58.21   17.18
500 30.61   32.67
750 20.39   49.05

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  56.45   17.71
50  58.75   17.02
150 59.08   16.93
250 59.08   16.93
500 59.10   16.92
750 58.66   17.05
5000    18.66   53.58

http://bl.ocks.org/pjanik/5238326
Pixi.js WebGLRenderer
Circles FPS repaint [ms]
25  56.39   17.73
50  59.64   16.77
150 60.39   16.56
250 60.44   16.55
500 60.48   16.53
750 60.05   16.65
5000    46.55   21.48




Windows 7, IE10

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25 85.71 11.67
50 91.19 10.97
150 54.55 18.33
250 33.88 29.52
500 17.36 57.59
750 10.60 94.38

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25 63.56 15.73
50 63.99 15.63
150 42.48 23.54
250 27.84 35.92
500 15.93 62.78
750 11.08 90.24

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
--- error ---


Windows 7, Chrome 25.0.1364.172 m

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  55.39   18.05
50  59.71   16.75
150 36.15   27.66
250 39.83   25.11
500 23.88   41.87
750 16.30   61.35


http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  59.55   16.79
50  59.64   16.77
150 58.57   17.07
250 42.77   23.38
500 25.00   40.00
750 17.52   57.08

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  59.48   16.81
50  59.12   16.91
150 59.24   16.88
250 48.91   20.45
500 37.21   26.87
750 38.55   25.94
5000    18.46   54.17


Windows 7, Firefox 19.0.2

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  47.88   20.89
50  45.86   21.81
150 13.38   74.71
250 7.66    130.62
500 3.77    265.28
750 3.66    273.38

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  79.83   12.53
50  60.66   16.49
150 38.67   25.86
250 29.52   33.88
500 13.66   73.22
750 8.31    120.36

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  61.40   16.29
50  58.28   17.16
150 51.16   19.55
250 48.64   20.56
500 30.73   32.55
750 19.88   50.29
5000    3.55    281.77


Windows 7, Firefox Nightly 22.0a1 (2013-03-25)

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  55.85   17.91
50  42.23   23.68
150 18.75   53.33
250 12.60   79.35
500 8.49    117.83
750 4.67    214.30

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  39.54   25.29
50  40.28   24.83
150 35.72   27.99
250 27.64   36.17
500 18.55   53.92
750 14.26   70.12

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  64.77   15.44
50  67.45   14.83
150 67.84   14.74
250 67.20   14.88
500 59.48   16.81
750 45.18   22.13
5000    10.67   93.73


Windows 7, Chrome 27.0.1452.2 canary

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  58.37   17.13
50  59.59   16.78
150 56.80   17.61
250 49.24   20.31
500 23.88   41.87
750 16.78   59.59

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  32.11   31.15
50  32.11   31.15
150 36.36   27.50
250 39.03   25.62
500 24.43   40.93
750 16.24   61.57

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
--- error ---


Windows 7, Safari 5.1.7

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  52.87   18.91
50  52.52   19.04
150 44.40   22.52
250 36.24   27.59
500 27.93   35.80
750 22.77   43.91

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  44.96   22.24
50  31.98   31.27
150 15.55   64.31
250 10.47   95.51
500 7.26    137.66
750 6.22    160.66

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  45.55   21.95
50  46.32   21.59
150 36.01   27.77
250 29.53   33.86
500 20.89   47.86
750 15.00   66.65
5000    3.35    298.30




iPad2, iOS 6.1.2, Mobile Safari

http://bl.ocks.org/pjanik/5169965
Canvas (KineticJS)
Circles FPS repaint [ms]
25  46.96   21.29
50  35.28   28.35
150 15.68   63.78
250 9.97    100.31
500 5.19    192.83
750 3.51    284.75

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  55.21   18.11
50  44.55   22.45
150 17.52   57.08
250 11.44   87.43
500 6.05    165.37
750 4.10    244.00


http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  56.01  17.85
50  50.27 19.89
150 27.83 35.93
250 18.88 52.97
500 17.38 57.53
750 9.99  100.07


http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  55.39 18.05
50  52.72 18.97
150 29.78 33.58
250 21.65 46.19
500 11.62 86.09
750 7.71  129.65
5000  1.18  846.20

Motorola Xoom Android v4.1.2, Chrome 25.0.1.1364.169

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  16.53   60.51
50  14.21   70.35
150 8.03    124.53
250 5.59    179.01
500 3.08    324.61
750 2.19    457.61

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  19.22   52.03
50  22.29   44.86
150 11.62   86.09
250 8.15    122.69
500 4.40    227.51
750 3.03    329.65

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  21.30   46.94
50  21.19   47.20
150 20.98   47.66
250 20.61   48.51
500 17.84   56.07
750 12.86   77.79
5000    2.45    408.06


Motorola Xoom Android v4.1.2, Android Browser

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  43.12   23.19
50  28.83   34.69
150 13.10   76.32
250 9.89    101.09
500 5.50    181.79
750 4.10    244.10


http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]

[stepheneb]

Oh ... fyi in case you are interested: the 2D molecular dynamics system: https://github.com/concord-consortium/lab

[GoodBoyDigital]

Thanks for the comprehensive tests @stepheneb ! The 2D molecular dynamics system is ace!

With regards to your findings, they do make sense I think.

There is 1 major difference between kinect.js and pixi.js that is causing the discrepancies. Kinect.js is SVG based and pixi.js is image based. The circle in the pixiDemo is being drawn to canvas using drawImage while kinect.js using stroke and fill calls.

Based on your findings, its clear some browsers draw primitives faster than they draw images in canvas.

I guess it comes down to what you are creating, if vector shapes are required its worth looking in to SVG/Primitive drawing based solutions (eg Kinect.js)

If you are creating more image based creations then bitmap based renderers are the best way to go (eg pixi.js)

cheers!

[stepheneb]

At 1:14 AM -0700 4/11/13, Mat Groves wrote:

Date: Thu, 11 Apr 2013 01:14:48 -0700
Mime-Version: 1.0
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: 7bit
Content-ID: 516670f8a08be_4ee5ac7e201084cd@fe2.rs.github.com.mail

Thanks for the comprehensive tests https://github.com/stepheneb@stepheneb ! The 2D molecular dynamics system is ace!

With regards to your findings, they do make sense I think.

There is 1 major difference between kinect.js and pixi.js that is causing the discrepancies. Kinect.js is SVG based and
pixi.jsis image based. The circle in the pixiDemo is being drawn to canvas using drawImage while kinect.js using stroke and
fill calls.

You may be mixing up the D3.js framework which is deeply integrated with SVG and http://kineticjs.com/ which describes itself
as a "HTML5 Canvas JavaScript framework"

In the red-circle benchmark test for Canvas (KineticJS) + Shape Caching we are rendering into an HTML5 Canvas element:
http://bl.ocks.org/pjanik/5169961

So while it's also true and surprising that SVG performance is faster on the iPad than Canvas performance -- I was very
surprised to find that Pixi.js was a great deal slower than KineticJS setup to use Shape caching rendering to an HTML5 Canvas
on Safari, Mobile Safari, and the Android browsers.

I took a closer look at Piotr's red-circle benchmarks for KineticJS and Pixi.js.

I just looked at the KineticJS source and it is using context.arc() to draw circles to a canvas.

While for Pixi.js he is creating a red circle in a separate canvas and using PIXI.Texture.fromCanvas() to create a texture
thatPici.js manipulates.

So the slowdown on the iPad seems to be in how you are rendering your PIXI.Texture objects.

I wrote a heatmap canvas renderer as part of a research spike in JS performance for a hard-coded adaptation of a model
originally written in NetLogo about 18 months ago and I'm drawing directly into what is returned by context.getImageData().

http://stepheneb.github.io/avalanche2d-js/avalanche2d.html

This runs quite fast on an iPad.

Table of benchmark results:
https://docs.google.com/a/concord.org/spreadsheet/ccc?key=0AtvlFoSBUC5kdDM4cHJhU0I4NGg5TjlWRkQ0ZExpcGc

And the canvas rendering code (if it is useful):
https://github.com/stepheneb/avalanche2d-js/blob/master/src/avalanche2d.js#L75-L155

Pixi.js of course are solving a more general problem, but my heatmap rendering code shows that the problem isn't a performance
issue with just drawing into and ImageData object and then transferring that back to the view canvas.

So I wonder if there still might not be a way to speed up Pixi.js on an iPad.

It's on my list to look at this because I'd like to think more about using Pixi.js ... but many things are on my list and
sinceI haven't gotten to it yet ... I thought the least I could do was document my current findings here for you.

Note: I use 'iPad' when I actually mean Safari, Mobile Safari, and the Android browsers because the right now theiPadis the
most important platform on which I see this slowdown.

• Stephen Bannasch
  Concord Consortium, http://www.concord.org

[GoodBoyDigital]

Doh! yup you are correct :)

Its quite interesting really! It must be just down to specific browser implementations of JS maybe?
As both engines are using similar drawImage calls?

Interestingly I just tried the tests on my ipad 2 Safari and got:

Pixi.js :

circles fps repaint
25 59.29 16.87
50 54.86 18.23
150 33.07 30.24
250 23.87 41.90
500 13.29 74.13
750 8.96 111.63

kinect.js:

circles fps repaint
25 59.59 16.91
50 40.85 23.14
150 19.61 51.74
250 12.72 82.35
500 6.36 157.27
750 4.29 232.9

[englercj]

considering this closed, reopen if there is still an issue that needs to be addressed.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.