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

Question

IE7 / Windows XP

我的页面中有第三方组件，每次调整浏览器窗口大小时都会执行大量DOM操作以调整自身。

不幸的是，我几乎无法控制它在内部的作用，而且我已经尽可能地优化了其他所有内容（例如回调和事件处理程序）。 我不能通过设置display：none来使组件脱离流程，因为如果我这样做，它将无法自我测量。

通常，在调整大小期间将容器的可见性设置为不可见有助于提高DOM呈现性能吗？

Answer 1

警告：我没有用IE7对此进行过专门测试，但根据我对DOM操作模型的了解，我有理由相信。

更改CSS属性（无论是display: none还是visibility: hidden what-have-you）都不会影响我使用的任何浏览器版本中DOM操作的性能。 提高DOM操作速度的主要方法是从文档树中删除您将要使用的节点，执行操作并重新添加它们。这包括跟踪其后续的兄弟节点，如果有的话（与insertBefore一起使用），如果您正在处理散布在文档周围的节点，这可能会变得复杂。

我在一次执行大量DOM操作时看到的一种技术是获取body元素的子元素列表，删除它们，执行操作（无论它们落在文档树中的哪个位置），然后重新获取body的子节点。 根据您的DOM操作需要多长时间（这本身部分取决于访问者计算机的速度！），这会产生明显的闪烁。 这就是为什么通过AJAX操作内容的网站通常会用“微调器”或加载屏幕替换任何临时删除的内容。

Answer 2

我不确定，但是从活动文档的DOM中删除它然后操作它确实提高了性能。 完成所有操作后，将其附加回文档的DOM。 可以认为它有点像视频缓冲区交换。

Answer 3

我刚刚使用按钮对话框测试了这个。 基本上，我多次复制一个长对话框，直到我有10000行文件。

HTML：

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

CSS：

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

Conslusion：

使用所有的JS和CSS，它大大减慢了计算机的速度 ，我所有的css动画都消失了。 特别是当单击按钮并且JS必须找到要显示的相应对话框时，它会滞后。

解：

将对话框放在另一个html（dialogs.html）中，并在需要时加载必需品。