RaphaelJS huge slowdowns in IE8 when editing attr () and text () (fill, stroke, weight) elements

Question

I am debugging some performance issues in IE8 with RaphaelJS. We build graphs from ~ 1000 elements and text nodes in raphael, and, in particular, one graph causes us problems when rendering it. In IE9, it takes 2-7 seconds, depending on the machine to render, and in IE8 it takes 1 minute plus.

You can see the site you are interested in . This is the third chart (click on it).

Essentially, we create elements for each data point and draw them on the raphael canvas.

I used the IE Developer Tools profiler and determined that the setFillAndStroke() function is called from both attr() and text() when we change the fill, stroke, style, and several other element settings. The getBoundingRect() function is the culprit in setFillAndStroke() .

Here is a screenshot of the profiler

In my research, I met people having problems with IE8, attr() and text() , e.g.

So a few questions:

• Can you set the default fill and stroke for Raphael elements so that they are created with this fill and stroke? This should remove the call to getClientBoundingRect() . I tried looking for such a function in the docs, but no luck.
• Can this be solved without changing the appearance of the graphs?
• If this is something we can only do through code, can this be done without changing RaphaelJS?
• Any other ideas?

Someone seems to have had a similar problem in earlier versions of Raphael, apparently fixed in version 2.0.0, but we are using version 2.0.2 (also tested to have the same problem in version 2.1 .0).

Here is the problem report for github .

Answer 1

So, thanks to the advice of Eliran Malka, I continued to switch from using attr() to adding classes and using CSS, when I discovered that we had an error, as a result of which 178 shortcuts were created instead of 8 (1 on the 22 ~ interval), all except for the main 8 of them outside the size of the "paper".

Having the suspicion that getBoundingRect() was probably suffocating when the elements were disconnected from the screen, I found the source of the error and corrected it by drawing only the expected 8 and that's it on the canvas. This reduces boot time from 1 minute plus to 8.8 seconds.

Thus, the reason for the sharp slowdown was the use of text() to create elements off the screen, and then changing their attributes with attr() .

While 8.8 seconds are still small, it is about an order of magnitude better than 1 minute and a bit (72 seconds, to be precise), so I'm going to call this the “answer” while we send the rest of the problem.