Question

IE7 / Windows XP

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

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

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

Answer 1

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

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

我在一次执行大量DOM操作时看到的一种技术是获取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）中，并在需要时加载必需品。

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

3 个答案:

HTML：

的CSS：

Conslusion：

解决方案：