Offline divs

As explained at the end of the previous chapter, avoiding reflow is a good way to speed things up. It's not always easy to completely avoid querying the state of the DOM during your manipulations. And even if you are very careful, as a framework developer, you are never sure what the user of your framework will do. However, there is a way to reduce the negative effect of a reflow; detach the piece of DOM you are working on, modify it, and then attach it back to the document.

Let's say you have a node with the ID box and want to manipulate its child elements in a complex manner. The following code shows you how to detach it:

// detach box
var box = $("#box").detach();

var aSubElement = box.find("#aSubElement")
// and so on

// attach it back
box.appendTo(boxParent);

This requires a small modification of our framework's API; until now, we used a string to identify sprites. This has the side effect of requiring the sprite to be part of the document. For example, if you call gf.x...