You can see the website in question here. This is The 3rd picture (click on it).
Basically, we create elements for each data point and draw them on the raphael canvas.
I have used IE Developer Tools Analyzer, and determined that when we change the fill, stroke, style and some other element settings, it is the setFillAndStroke() function called from attr() and text().The getBoundingRect() function is the culprit in setFillAndStroke() .
This is a screenshot of the profiler output
In my research, I have encountered people who have problems with IE8, attr() and text(), for example,< /p>
So there are a few questions:
>Can you set a’default’ fill and stroke for Raphael elements so that you can create them with fill and stroke? This should remove the call to getClientBoundingRect(). I have tried looking for such a function in the documentation, but no luck.
>Is this a problem that we can solve without changing the look and feel of the graph?
>If this is something we can accomplish through code, is it possible to do so without modifying RaphaelJS?
>Any other ideas?
There seems to be a similar problem in the old version of Raphael, which has obviously been fixed in 2.0.0, but we are using version 2.0.2 (the test also has the same problem in 2.1.0 ).
This is an issue report on github.
Suspected that getBoundingRect() may choke when the element is off-screen, I found the source of the bug and fixed it, only the expected 8 was drawn , And all of them are on the canvas. This reduces the load time from 1 minute to 8.8 seconds.
So the reason for the dramatic slowdown is to use text() to create elements off-screen, and then pass attr( ) To change its properties.
Although 8.8 seconds is still not very good, it is about an order of magnitude more than 1 minute and a little bit (72 seconds to be exact), so when we solve the remaining problems, I will call it “answered”.
I am using RaphaelJS to debug some performance issues in IE8. We are using ~1000 elements and text nodes in Raphael Building graphics, especially a graphic will cause us problems when rendering. In IE9, it takes 2-7 seconds, depending on the machine to be rendered, it takes 1 minute in IE8.
< p>You can see the website in question here. This is the 3rd picture (click on it).
Basically, we create elements for each data point and draw them on the raphael canvas.
I have used the IE Developer Tools analyzer and determined that when we change the fill, stroke, style and some other element settings, it is setFillAndStroke() called from attr() and text() Function. The getBoundingRect() function is the culprit in setFillAndStroke().
This is a screenshot of the profiler output
In my research, I have encountered problems with IE8, attr () and text() have problems, for example,
< p>So there are a few questions:
>Can you set a’default’ fill and stroke for Raphael elements so that you can create them with fill and stroke? This should remove the call to getClientBoundingRect(). I have tried looking for such a function in the documentation, but no luck.
>Is this a problem that we can solve without changing the look and feel of the graph?
>If this is something we can accomplish through code, is it possible to do so without modifying RaphaelJS?
>Any other ideas?
There seems to be a similar problem in the old version of Raphael, which has obviously been fixed in 2.0.0, but we are using version 2.0.2 (the test also has the same problem in 2.1.0 ).
This is an issue report on github.
So, thanks to Eliran Malka’s suggestion, I will continue to use attr() to change To add classes and use CSS, when I discovered that we had an error that caused a total of 178 labels to be drawn instead of 8 (1 for every 22 intervals), all the main 8 except for the size of’paper’. < p>
Suspected that getBoundingRect() might suffocate when the element was off-screen, I found the source of the bug and fixed it, only the expected 8 was drawn, and all of them were on the canvas. This reduced Loading time from 1 minute to 8.8 seconds.
Therefore, the reason for the dramatic slowdown is to use text() to create an element off-screen, and then change its attributes through attr().
Although 8.8 seconds is still not very good, it is about an order of magnitude longer than 1 minute and a little bit (72 seconds to be exact), so when we solve the remaining questions, I will call it “answered”.