Question

我有一个javascript函数，可以更改大量dom节点（＆gt; 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

如果你隐藏了一个普通的父母，然后隐藏了这些元素，然后展示了父母，那就不应该让它不必重新制作。

Answer 3

~~当JS更改每个元素时，浏览器将重排页面。~~正如您所建议的那样，最好保持显示的更改直到结束。这也会让用户感觉更顺畅，更快速（即使它不是真的）。

我会：

克隆包装您要处理的节点的节点。
对克隆节点上的处理进行处理。
用克隆替换原始节点。

如果处理需要很长时间（超过0.5秒），请考虑在显示屏上设置一些内容，让用户知道发生了什么。慢慢地将原始内容淡出至最低约50％的不透明度是一种简单的方法。

IE，Javascript和Reflow

3 个答案: