Re: [Rendering Order] Some early feedback

On 10/26/09 12:01 PM, Boris Zbarsky wrote:
> On 10/26/09 11:47 AM, Jeff Schiller wrote:
> Removing an <iframe> from the DOM currently unloads the document inside
> the iframe in Gecko for technical, not spec, reasons. Fixing that (which
> is desirable, but low priority) seems like a better idea than
> introducing yet another DOM method.

That said, I should note that for HTML/CSS content a z-index change is 
much cheaper than an insertBefore.  On a conceptual level, the former 
merely has to invalidate the area of the object whose z-index changed, 
thus triggering a repaint of that area.  The latter, on a conceptual 
level, has to tear down the CSS boxes for the subtree being moved and 
create new ones, rerunning CSS selector matching (since selector 
matching depends on tree position and since styles depend on both which 
selectors matched _and_ on tree position due to inheritance). 
Optimizing some of this work away while not introducing bugs would be 
... complicated.

To put numbers to this, load http://www.cnn.com and try both approaches. 
  To swap using z-index:

javascript: function swap() { var start = new Date(); 
document.body.style.zIndex = -1 * document.body.style.zIndex; 
document.body.offsetWidth; setTimeout(function() { alert(new Date() - 
start); }, 0); } document.body.style.position = 'absolute'; 
document.body.style.zIndex = 2; var myNewNode = 
document.createElement('div'); 
document.documentElement.insertBefore(myNewNode, 
document.documentElement.firstChild); myNewNode.innerHTML = '<input 
type="button" onclick="swap()" value="Swap"><div style="position: 
absolute; width: 200px; height: 200px; background: white; z-index: 1">'; 
void(0);

To swap using insertBefore:

javascript: function swap() { var start = new Date(); 
otherNode.parentNode.insertBefore(topNode, otherNode); var temp = 
otherNode; otherNode = topNode; topNode = temp; 
document.documentElement.offsetWidth; setTimeout(function() { alert(new 
Date() - start); }, 0); } var topNode = document.body; 
document.body.position = 'absolute'; var myNewNode = 
document.createElement('div'); 
document.documentElement.insertBefore(myNewNode, 
document.documentElement.firstChild); myNewNode.innerHTML = '<input 
type="button" onclick="swap()" value="Swap"><div style="position: 
absolute; width: 200px; height: 200px; background: white;" 
id="swapper">'; var otherNode = document.getElementById("swapper"); void(0);

In Safari 4, for example, the former requires ~30ms over here.  The 
latter requires ~70ms.  In Gecko builds with bug 507764 fixed, the 
numbers are 50ms and 200ms respectively; the former will go down once 
some planned inline style change optimizations happen.

-Boris

Received on Monday, 26 October 2009 16:47:11 UTC