IE、Javascript和Reflow

Question

我有一个javascript函数，可以改变大量dom节点(>5000)的css显示('block'，'none')。我在尽可能快的做这件事。

IE是否会中断javascript回流并绘制屏幕，还是会等到javascript引擎将控制权返回给浏览器？我希望在所有节点都设置好显示之前，避免浏览器的任何额外工作。

我注意到在JQuery的show()方法中，DOM操作与注释放在一个紧密的循环中

//设置第二个循环中元素的显示

//避免常量回流

(http://code.google.com/p/jqueryjs/source/browse/trunk/jquery/src/fx.js第51行)

谢谢,

詹姆斯

Answer 1

使用CSS来显示和隐藏元素，方法是更改父元素的类名。我之前做的一些测试表明，它比在每个元素上设置display属性快十倍左右。由于您只更改单个属性，因此它只会重排一次。

示例：

<style>
.State1 .InitiallyHidden { display: none; }
.State2 .InitiallyShown { display: none; }
</style>

<script>
function flip() {
   var o = document.getElementById('Parent');
   o.className = o.className = 'State1' ? 'State2' : 'State1';
}
</script>

<input type="button" value="flip" onclick="flip();" />

<div id="Parent" class="State1">
   <div class="InitiallyHidden">One</div>
   <div class="InitiallyShown">Two</div>
   <div class="InitiallyHidden">Three</div>
   <div class="InitiallyShown">Four</div>
</div>

Answer 2

如果你隐藏了一个共同的父元素，然后隐藏了元素，然后显示了父元素，这应该可以防止它不必要地重新绘制。