- From: Boris Zbarsky <bzbarsky@MIT.EDU>
- Date: Mon, 26 Oct 2009 12:46:31 -0400
- To: Boris Zbarsky <bzbarsky@mit.edu>
- CC: www-svg <www-svg@w3.org>
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