javascript - 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 来显示和隐藏元素。我前一段时间做的一些测试表明，它比在每个元素上设置显示属性快十倍。由于您只更改单个属性，因此它只会重排一次。

例子:

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