可见性会影响 DOM 操作性能吗？答案

【问题标题】：Does visibility affect DOM manipulation performance?可见性会影响 DOM 操作性能吗？
【发布时间】：2010-10-07 08:22:06
【问题描述】：

IE7/Windows XP

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

不幸的是，我几乎无法控制它在内部做什么，并且我已经尽可能地优化了其他所有内容（例如回调和事件处理程序）。我无法通过设置 display:none 将组件从流程中移除，因为如果我这样做，它会无法自行测量。

一般来说，在调整大小期间将容器的可见性设置为不可见有助于提高 DOM 渲染性能吗？

【问题讨论】：

strager 说了什么。我们不知道你在做什么，因此很难说什么会有所帮助......
好吧...一般来说，谁知道呢？我曾经见过它有帮助，即便如此，它也只减少了大约 100 毫秒的最坏情况，即给定例程需要几秒钟才能运行。通过简单地先测量所有内容然后对其进行操作，我最终获得了更好的性能。
可能相关 - stackoverflow.com/q/14058013/104380

标签： javascript performance optimization dom

【解决方案1】：

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

html:

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

css:

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

结论：

使用所有的 JS 和 CSS，它大大降低了计算机速度，我所有的 css 动画都消失了。尤其是当一个按钮被点击并且 JS 必须找到相应的对话框来显示时，它会滞后。

解决方案：

将对话框放在另一个 html (dialogs.html) 中，并在需要时加载必要的内容。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

谢谢。不过，在我的情况下，渲染操作的一部分涉及测量一些元素的 offsetHeight（第三方组件依赖它）。所以我觉得我运气不好。
也许测量、删除、修改、重新插入？

【解决方案3】：

我不确定，但将其从活动文档的 DOM 中移除然后对其进行操作确实会提高性能。完成所有操作后，将其附加回文档的 DOM。可以把它想象成视频缓冲区交换。

【讨论】：