Search code examples
javascriptreflowdocumentfragment

combining documentfragment and replacechild to minimize reflow

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?
}
Solution

  • 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.