I've been thinking about how we handle inline style changes like this:

function foo() {
  var style = document.getElementById("foo").style;
  style.left = (style.left + 1) + "px";
  style.top = (style.top + 1) + "px";
}
setInterval(foo, 1);

At the moment, every time the interval timer fires we will end up setting inline style twice. We will reresolve style on each of those calls, but only reflow once (since reflows don't happen synchronously).

In most testcases of this sort, style reresolution (ReResolveStyleContext and so forth) is in fact a major contributor to the total time spent, so it would be nice to reduce the amount of time it takes...

Some possible approaches:

1)  Make updates batched via BeginUpdate/EndUpdate really be batched as
    far as style resolution is concerned, and make the JS execution
    context or some such (I don't know whether we have such a beast,
    really) call BeginUpdate when it starts and EndUpdate when it
    finishes.  For example, DOM could BeginUpdate when called from
    XPConnect while not in an update and EndUpdate off a timer or
    something...
2)  Make style reresolution asynchronous, with coalescing similar to the
    way reflow is coalesced.  That would probably require
    getComputedStyle to always flush out the pending style reresolves,
    but getComputedStyle is not called that much, really...  it could
    just FlushPendingNotifications and that could flush out style
    reresolves in addition to what it does now.

I sort of like approach 2, since it treats all dom/layout callers equally instead of special-casing JS.... It also requires less work, I suspect -- the coalescing, etc would need to happen in both approaches...

Thoughts?

-Boris
_______________________________________________
mozilla-layout mailing list
[EMAIL PROTECTED]
http://mail.mozilla.org/listinfo/mozilla-layout

Reply via email to