可见度影响DOM操纵性能？ [英] Does visibility affect DOM manipulation performance?

问题描述

IE7 / Windows XP

我的网页中有一个第三方组件，每当浏览器窗口调整大小时，都会进行大量的DOM操作来进行调整。 / p>

不幸的是，我几乎没有控制内部的内容，我尽可能优化了其他一切（如回调和事件处理程序）。我不能通过设置显示来取消组件的流量：none，因为如果我这样做，它无法自己测量。

通常，将容器的可见性设置为调整大小时看不见有助于提高DOM渲染性能？

解决方案

注意事项：我没有用IE7专门测试这个，但我是合理的根据我对DOM操作模型的了解，我有信心。

更改CSS属性（无论是 display：none 还是 visibility：hidden 或者what-have-you）不会影响任何使用任何浏览器的任何版本的DOM操纵的性能。提高DOM操作速度的主要方法是从文档树中删除要使用的节点，执行操作并重新添加它们。这涉及跟踪他们成功的兄弟节点（如果有） （与 insertBefore 一起使用），如果您使用分散在文档周围的节点，这可能变得复杂。

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

IE7/Windows XP

I have a third party component in my page that does a lot of DOM manipulation to adjust itself each time the browser window is resized.

Unfortunately I have little control of what it does internally and I have optimized everything else (such as callbacks and event handlers) as much as I can. I can't take the component off the flow by setting display:none because it fails measuring itself if I do so.

In general, does setting visibility of the container to invisible during the resize help improve DOM rendering performance?

解决方案

Caveat: I have not specifically tested this with IE7, but I am reasonably confident based on what I know about its DOM manipulation model.

Changing CSS properties (whether display: none or visibility: hidden or what-have-you) will not affect the performance of DOM manipulation in any version of any browser I've worked with. The primary way to improve the speed of DOM manipulation is to remove the node(s) you will be working with from the document tree, performing your manipulations, and adding them back in. This involves keeping track of their succeeding sibling nodes, if any (for use with insertBefore), which can become complex if you're working with nodes which are scattered around the document.

One technique I have seen when performing a large number of DOM manipulations all at once is to get a list of the body element's children, remove them, perform your manipulations (wherever they fall in the document tree), and then reappend the body's child nodes. Depending on how long your DOM manipulations take (which is itself partially dependent on the speed of your visitor's computer!), this can produce a noticeable flicker. This is why sites manipulating content via AJAX will usually replace any temporarily-removed content with a "spinner" or loading screen.

这篇关于可见度影响DOM操纵性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！