IE、Javascript和回流
我有一个javascript函数，可以更改大量dom节点（>5000）的css显示（'block'，'none'）。我正在尽可能快地做到这一点 IE会中断javascript回流并绘制屏幕，还是等到javascript引擎将控制权返回到浏览器？在所有节点都设置了显示之前，我希望避免浏览器中的任何额外工作 我注意到，在JQuery的show（）方法中，DOM操作和注释被放在一个紧密的循环中 //设置第二个循环中元素的显示IE、Javascript和回流,javascript,internet-explorer,Javascript,Internet Explorer,我有一个javascript函数，可以更改大量dom节点（>5000）的css显示（'block'，'none'）。我正在尽可能快地做到这一点 IE会中断javascript回流并绘制屏幕，还是等到javascript引擎将控制权返回到浏览器？在所有节点都设置了显示之前，我希望避免浏览器中的任何额外工作 我注意到，在JQuery的show（）方法中，DOM操作和注释被放在一个紧密的循环中 //设置第二个循环中元素的显示 //避免持续回流 （第51行） 谢谢 James如果您隐藏了一个公共父级，然
//避免持续回流 （第51行） 谢谢
James如果您隐藏了一个公共父级，然后隐藏了元素，然后显示了父级，那么应该可以防止它不必要地重新绘制。当JS更改每个元素时，浏览器将重新显示页面。正如您所建议的，最好将显示器的变化保持到最后。这对用户来说也会感觉更平滑、更快（即使不是真的） 我想：
如果处理需要很长时间（超过0.5秒），考虑在显示器上设置一些东西，让用户知道某事正在发生。将原始内容慢慢淡出到大约50%的不透明度是一种简单的方法。使用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>
.State1.InitiallyHidden{display:none；}
.State2.InitiallyShown{display:none；}
函数翻转（）{
var o=document.getElementById（'Parent'）；
o、 className=o.className='State1'？'State2'：'State1'；
}
一个
两个
三
四