Pages

24 July, 2015

How fast does your browser render line charts?

Here is quick demo that tries to draw hundreds to millions of lines using your browsers drawing APIs of the HTML canvas. (Click on the "Result" of tab of the JSFiddle to show the app)

For instance, you can try to set the number of lines to 6 Million, for which I get the following results on my Macbook.

Firefox 39 Chrome 44
= 817 ms
= 3047 ms
= 5484 ms
= 55383 ms  
= 1490 ms
= 3066 ms
= 4116 ms
= 13789 ms  

You may need to increase tmax to 60k or more milliseconds on slower machines or browsers. Otherwise the processing will stop after  tmax ms

Feel free to post your results in the comments. Note that this demo is copy my former jsPerf test. However, since jsPerf is down due to spam activities, I moved it over to JSFiddle for everyone to experiment with it.

Cheers, Juve

3 comments:

Uwe Jugel said...

Here are some more results
using 6M lines,
tested on my Core2Duo@3.17 Ghz,
running Ubuntu 14.4 LTS.

Chromium 45
create = 4831 ms
pack = 5481 ms
unpack = 10116 ms
render = 25595 ms

Firefox 42
create = 1194 ms
pack = 6361 ms
unpack = 9275 ms
render = 152112 ms

Uwe Jugel said...

Here are more results for 6M lines
at my Core2Duo@3.17 Ghz,
now running Ubuntu 16.4 LTS.

Chromium 50

create = 1472 ms
pack = 4221 ms
unpack = 5097 ms
render = 25808 ms

Firefox 47

create = 975 ms
pack = 8199 ms
unpack = 9098 ms
render = 82947 ms

Uwe Jugel said...

New Firefox 48 with e10s/Electrolysis [1,2] enabled

create = 555 ms
pack = 6117 ms
unpack = 6720 ms
render = 9991 ms

[1] https://wiki.mozilla.org/Electrolysis
[2] https://asadotzler.com/2016/06/06/firefox-48-beta-release-and-e10s/