我有一个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行)
谢谢,
詹姆斯
答案 0 :(得分:2)
通过更改父元素的类名,使用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>
答案 1 :(得分:0)
如果你隐藏了一个普通的父母,然后隐藏了这些元素,然后展示了父母,那就不应该让它不必重新制作。
答案 2 :(得分:0)
当JS更改每个元素时,浏览器将重排页面。正如您所建议的那样,最好保持显示的更改直到结束。这也会让用户感觉更顺畅,更快速(即使它不是真的)。
我会:
如果处理需要很长时间(超过0.5秒),请考虑在显示屏上设置一些内容,让用户知道发生了什么。慢慢地将原始内容淡出至最低约50%的不透明度是一种简单的方法。