可见性是否影响DOM操作性能?

警告:我还没有用IE7专门测试过这一点,但根据我对其DOM操作模型的了解,我有相当的信心。

更改CSS属性(是否 display: none 或 visibility: hidden 或者你所做的一切)不会影响我使用过的任何浏览器的任何版本中DOM操作的性能。提高DOM操作速度的主要方法是从文档树中删除要处理的节点,执行操作,然后将它们重新添加到文档树中。这涉及到跟踪它们的后续同级节点(如果有的话)(用于 insertBefore

我在一次执行大量DOM操作时看到的一种技术是获取 body 元素的子节点,删除它们,执行操作(无论它们位于文档树中的何处),然后重新附加主体的子节点。根据DOM操作所需的时间(这部分取决于访问者计算机的速度!),这可能会产生明显的闪烁。这就是为什么通过AJAX操作内容的站点通常会用“微调器”或加载屏幕替换任何临时删除的内容。

做 提高性能。完成所有操作后,将其附加回文档的DOM。把它想象成视频缓冲区交换。

html:

<div class="no-visible dialog">
    ....
</div>

css:

.no-visible {
    visibility: hidden;
    animation:....
    ....
}

结论:

信息技术 所有的JS和CSS,以及我所有的CSS动画都消失了。特别是当一个按钮被点击,JS必须找到相应的对话框来显示时,它会滞后。

解决方案: