结合documentfragment和replacechild以最大限度地减少回流

Question

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

编辑： The javascript guide表明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循环内）将逐个删除元素并每次都引起重排。