0

I'm making a javascript game without using canvas, and I want the screen to reflow only once per cycle, for speed. Is there a way for documentFragment to replace named elements?

EDIT: The javascript guide suggests that replaceChild( ) can be used with documentFragment but the example seems to imply multiple reflows:

function reverse(n) {  // Reverses the order of the children of Node n
    var f = document.createDocumentFragment(  ); 
    while(n.lastChild)                 
          f.appendChild(n.lastChild);  
    n.appendChild(f);                  // surely this causes a reflow each time?
}
Chris Tolworthy
  • 2,066
  • 4
  • 20
  • 24
  • 2
    The best you can do is "double buffering". Clone the entire node tree you care about, work with it disjoint from the document, then replace it with current tree and repeat – Raynos Dec 13 '11 at 10:21
  • 1
    @Raynos is totally right here, that's the most efficient way to do this and it would only require one reflow. Besides that you could replace what you need with that node tree disjoint from the document, so optimization ++ – alessioalex Dec 13 '11 at 10:28
  • Thanks. I'm finding a memory leak in IE8 while doing this, but that's probably a separate issue. – Chris Tolworthy Dec 13 '11 at 11:37
  • I found this site about the IE8 leak: essential for anyone who, like me. repeatedly adds and removes nodes: http://weblogs.java.net/blog/driscoll/archive/2009/11/13/ie-memory-management-and-you – Chris Tolworthy Dec 13 '11 at 12:00

1 Answers1

1

If you put everything in a wrapping div it should work out fine.

In function reverse... the last line is only executed once. But the line before (inside the while loop) will remove elements one by one and cause a reflow each time.

bennedich
  • 12,150
  • 6
  • 33
  • 41