I've taken your suggestion and moved the measurement code back into an explicit method, and the difference is staggering -- the rendering time is now less than half of what it was. Thanks!

In the fairly simple charts that I'm rendering, I don't need to measure the text (at least, not in any of the cases that I've come up against yet!), so for me, this is an all-round win.

Do you know off the top of your head if this is this a Gecko-specific problem? If it is, it's probably worth filing a bug on bugzilla. I've tried searching for an existing one, but either it doesn't exist, or my bugzilla-fu is sadly lacking.

On 29/09/11 02:20, Sebastian Markbåge wrote:
The real issue is this commit: 
https://github.com/calyptus/art/commit/3b2f838dd04d09e89d562a05ce5024812430bfab

We're now always measuring the text. Firefox wants to render it to do
that. Which is why it needs to be in the DOM. It causes reflow, redraw
and other performance intensive stuff.

You'll notice there's a comment to remove this in the draw function of
ART.SVG.Text. The reason we keep it in there is because some APIs
require an object to have an explicit size. These APIs could lazily
call .measure() on the text if they're needed. But I'd rather drop
those APIs. If you don't use those defaults you can move the measuring
code back to the explicit measure function.

(In charts you may want to measure some text anyway. The trick then is
to do it in bulk. For example, put all your text on separate lines and
measure the box to see what's the size of the widest text. You can
also measure text after it's in the DOM. Then it's cheap.)


On Sep 27, 4:36 am, Barry van Oudtshoorn<[email protected]>
wrote:
Hi!

I'm using ART for a graphing library, and I've found that there seems to
be a significant bottleneck in the _whileInDocument method in
ART.SVG.Text. My guess is that instantiating a new ART.SVG instance,
injecting it into the document, then removing it immediately is what's
causing the slowdown.

I've tracked down the addition of this method to commit c99cca1151
[https://github.com/barryvan/art/tree/c99cca11516bcfd98d81d04dc4ed5750...],
but the commit message doesn't give a very clear indication of what this
function is for, and why it does what it does.

Here's a table with the raw numbers. Note that I've replaced "anonymous"
with the actual function name for the first few, to make it more legible. :)

Total time: 635.212ms
*Function
*       *Calls
*       *Percent
*       *Own time
*       *Time
*       *Average
*       *Min
*       *Max
*       *Source
*
ART.SVG.Text._whileInDocument
         177     49.41%  313.88ms        369.668ms       2.089ms         
1.972ms         2.843ms
ART.SVG.js (line 579)
ART.SVG.Text.draw
         177     8.58%   54.489ms        430.688ms       2.433ms         
2.276ms         3.278ms
ART.SVG.js (line 435)
ART.Element.Inject      875     4.77%   30.271ms        40.665ms        0.046ms 
        0.003ms
0.175ms
ART.js (line 37)
ART.SVG.Base._setColor  1697    2.43%   15.405ms        64.88ms         0.038ms
0.007ms         0.267ms
ART.SVG.js (line 214)
anonymous       510     1.9%    12.051ms        12.051ms        0.024ms         
0.019ms         0.07ms
ART.SVG.js (line 62)
anonymous       1310    1.86%   11.824ms        37.43ms         0.029ms         
0.023ms         0.103ms
ART.Color.js (line 27)
anonymous       354     1.62%   10.294ms        10.294ms        0.029ms         
0.003ms         0.634ms
ART.js (line 43)
anonymous       4064    1.44%   9.175ms         12.128ms        0.003ms         
0ms     0.029ms
mootools-core.js (line 43)
anonymous       1074    1.44%   9.119ms         9.119ms         0.008ms         
0.005ms         0.245ms
ART.SVG.js (line 15)
anonymous       1310    1.18%   7.516ms         16.511ms        0.013ms         
0.009ms         0.088ms
ART.Color.js (line 20)

What I'm wondering is whether there's some way to optimise this --
ideally, we shouldn't be doing this much manipulation using the live
DOM, as it's really slow. :) I'm not actually drawing very much text --
10, 20, .., 100 for the y-axis and maybe 8 labels for the x-axis, across
about 10 graphs; all up, 177 pieces of text, as you can see in the table.

- Barry

--
Barry van Oudtshoornwww.barryvan.com.au

Not sent from my Apple ?Phone.


--
Barry van Oudtshoorn
www.barryvan.com.au

Not sent from my Apple πPhone.

Reply via email to