Improving performance of d3.js SVG rendering in Firefox

[Alex]

I have been working on a d3.js-backed web application that renders interactive SVG. 

Interactivity is defined here as handling drag, mouseover and single-click JavaScript events on a "heatmap"-like grid of <rect> elements grouped by column, with column <g> elements then grouped into a larger grid <g> group.

This app works quite snappily in Chrome, decently in Safari, but not well in Firefox.

Before I start investigating how to profile this application with different browsers, I'd like to ask if there are general strategies for improving the performance of SVG-based web applications in Firefox (and, to a lesser extent, Safari).

If switching to a <canvas>-based approach yields better performance across browsers, what do I lose in terms of user interactivity? Are there working examples of how to transition to this approach? (Some demo pages I've searched for seem to be older and return 404-not-found errors.)

Thanks in advance for your advice.

Regards,

Alex

[Miguel Pignatelli]

I filed a bug in the Firefox bug tracker some time ago for a similar
reason (panning and zooming of svg being very slow):

https://bugzilla.mozilla.org/show_bug.cgi?id=87342

I have to say that things have improved in response to this bug. The
latests nightly versions of Firefox work much better on the use cases I
presented.
I encourage you to follow the same path. Open a bug entry and help the
firefox people to track it down (test on Nightly first!) -- even if you
want to implement a workaround in the short-run. It is the best way to
improve things in the med/long-run.

Cheers,

M;

> --
> You received this message because you are subscribed to the Google
> Groups "d3-js" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to d3-js+un...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

[Piotr Janik]

The bug report is probably the best you can do. We had many similar problems with Firefox: 

http://blog.concord.org/serious-performance-regression-in-firefox-18-and-newer

Some of issues are resolved and in general FF Nightly version works much better. Safari rendering performance should be basically similar to Chrome (as long as Blink is still similar to WebKit, however these are only speculations ;)). Potential slowdowns in Safari can be caused by the different JS engine (slower than Chrome's V8), so you can try to profile application logic too.