Circle performance in IE 6, 7, 8

[cishida]

Hello,
I've just started using Raphael. It appears to be a great JS interface
to SVG/VML.
I'm having a performance problem with IE (6, 7, and 8). Drawing a
diagram with approximately 100 circles takes 10 seconds in IE, but <1
second of Firefox. When I profiled the JS code in IE 8 (i'm seeing the
same performance in 6 and 7, but IE 8 has a nice new JS profiler), I
noticed that >90% of the time spent drawing is spent in the setBox()
function (called by theCircle()).

Specifically, the following lines in setBox seem to be the culprit of
the slowdown:

} else {
var left = this.vml.width / 2 - w / 2,
top = this.vml.height / 2 - h / 2;
gs.position = "absolute";
gs.left = x - left + "px";
gs.top = y - top + "px";
this.X = x - left;
this.Y = y - top;
this.W = w;
this.H = h;
gs.width = this.vml.width + "px";
gs.height = this.vml.height + "px";
os.position = "absolute";
os.top = top + "px";
os.left = left + "px";
os.width = w + "px";
os.height = h + "px";
}

The "gs" lines which set style attributes on the group element
together take about 20 ms per setBox call. Considering setBox is
called several times for each circle, this adds up to a lot of time.
When I comment out all the gs lines above setBox executes is less than
1 ms. The drawing completes in <1 second instead of 10 seconds (of
course the circles don't look correct).

I tried putting the equivalent VML out into a new HTML file and the
same diagram renders in <1 second so it seems that VML can render a
lot faster than it is rendering through Raphael.

I've looked for a different way of setting gs style attributes but I
could find anything.

Is anyone else experiencing this problem with IE? I would appreciate
any advice or help. I can provide additional code/data if it would be
helpful. We need Raphael to work in IE as well as Firefox and right
now it's just too slow.

[Jeff Nichols]

> Is anyone else experiencing this problem with IE? I would appreciate
> any advice or help. I can provide additional code/data if it would be
> helpful. We need Raphael to work in IE as well as Firefox and right
> now it's just too slow.

I'm not currently drawing anything with that number of circles, but I
will be soon. I made a little test page to verify what you found.

I can verify that drawing 100 circles takes significantly longer in IE
than in FF. However, on my machine the time maxed out at about 3
seconds (versus nearly instantaneous in FF).

But what's also interesting is, once those circles are drawn,
animation of those circles is much smoother in IE than in FF.

I've pushed "test/circles.html" to my raphael fork for anyone to check
out (or for Dmitry to pull in):

http://github.com/netnichols/raphael/tree/master

Jeff

[cishida]

Jeff,
I tried out your example, I can confirm that it runs in about 3
seconds (3.5 seconds on my PC in IE 8 with IE7 compatibility mode
turned on). 3.5 seconds for 100 circles is still a lot of time, but a
lot better than 10 seconds.

I cannot immediately reconcile the discrepancy between the profiler
output from our examples. Each call to setBox takes considerably less
time in your example then in our example. When I run your example,
setBox calls average 15.9 ms per call. In our example, setBox consumes
an average of 48 ms per call (same browser, same version of
raphael.js). There must be some other difference between our circle
elements or how we construct them -- I just don't see it at this point
(the VML DOM structure appears identical).

Note that our example also includes 119 lines (paths). I previously
reported an average of 20 ms per setBox call, but that number included
setBox calls from lines and circles. Line setBox calls take very
little time (<1 ms per call). When I don't include line setBox calls
the average goes up to 48 ms per call (as reported above). 200*48 =
9600 ms, which is a majority of the 11 second run time.

Your example calls theCircle() 100 times and then attr() 100 times.
The circle calls take a total of 1997 ms and attr 1482 ms for a total
of about 3.5 seconds:

Circle (100, 1997.33 ms)
-> theCircle (100,1997.33 ms)
-> setBox (100, 1732.06 ms)
-> setFillAndStroke (100, 265.27 ms)

attr (100, 1482.39 ms)
-> setBox (100, 1451.18 ms)
-> setFillAndStroke (100, 31.21 ms)

Unlike your example, our example intersperses circle and attribute
calls (we draw by row so for example, there will be 4 circle then 4
attribute, and then 16 circle and 16 attribute calls, etc). Maybe this
changes how IE builds its DOM and therefore has a detrimental affect
on IE performance (though the profile output indicates that setBox
calls consistently take ~50 ms, runtime does not seem to increase as
circles are added). I also see that you are using jQuery, it's
possible that it has some positive affect on performance.

Regardless of the discrepancy (3.5 vs 10), it still would be nice to
know why setBox takes so long on IE compared with FF, Safari, etc. As
I said in my original posting, the code in setBox that consume a
majority of the time are those that set styles attributes on VML group
elements containing a circle or rect. Setting style attributes on the
actual oval element takes no time at all:

<rvml:group style="POSITION: absolute; WIDTH: 900px; HEIGHT: 450px;
TOP: 150px; LEFT: -383px" coordsize = "900,450">
<rvml:oval style="POSITION: absolute; WIDTH: 4px; HEIGHT: 4px; TOP:
223px; LEFT: 448px" coordsize = "21600,21600" filled = "t" fillcolor =
"#aaa" stroked = "t" strokecolor = "black"><rvml:fill type = "solid"></
rvml:fill>
<rvml:stroke opacity = "1" miterlimit = "8">
</rvml:stroke>
</rvml:oval>
</rvml:group>


Chris