javascript - 结合 documentfragment 和 replacechild 以最小化回流

Question

我正在制作一个不使用画布的 javascript 游戏，并且我希望屏幕每个周期只重排一次，以提高速度。有没有办法让 documentFragment 替换命名元素？

编辑： javascript 指南建议 replaceChild( ) 可以与 documentFragment 一起使用，但该示例似乎暗示了多次重排：

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

Answer 1

如果你把所有东西都放在一个包装里div，它应该可以正常工作。

在function reverse...最后一行只执行一次。但是之前的行（在while循环内）会一个一个地删除元素，并且每次都会导致回流。