操作隐藏的 DOM 元素会影响性能吗？答案

【问题标题】：Does manipulating a hidden DOM element affect performance?操作隐藏的 DOM 元素会影响性能吗？
【发布时间】：2015-09-24 23:52:51
【问题描述】：

我有一个页面，其中包含 3 个通过 HighCharts 呈现的图表。大多数用户将通过平板电脑访问此页面。这些图表都是“实时数据”图表，因此它们每秒都会用新数据更新。在给定时间，只有一个图表可见。

当图表被隐藏（显示：无），但其 HTML 仍每秒更新一次时，这会影响性能吗？如果我在隐藏时从 DOM 中删除图表的包含元素，然后在再次显示图表时将元素重新添加回来，这会有所不同吗？当图表从 DOM 中移除时，它仍然会每秒更新一次，但它实际上并不是 DOM 的一部分。

【问题讨论】：

如果一个元素是隐藏的（显示：无），它不会是渲染树的一部分，所以它不会参与回流/重绘.....但是分离元素from dom tree 将是更好的选择，....一旦从对其进行的 dom 更新中删除一个元素，就不会触发 reflow/repaint

【解决方案1】：

当图表被隐藏 (display:none)，但其 HTML 仍每秒更新一次时，这会影响性能吗？

是的，即使隐藏它也会影响性能。例如，您的脚本中的$('#fooElement') 仍会通过 DOM 尝试查找元素。但是，当元素在隐藏状态下更新时，它不必由浏览器呈现，因此成本更低。

如果我在隐藏时从 DOM 中删除图表的包含元素，然后在再次显示图表时将元素添加回来，会有什么不同吗？

如果您从 DOM 中删除它，您将不得不在用户尝试查看它时构建它。恕我直言，这比将其留在 DOM 中更昂贵。另一件事是您可以忽略更新，直到它显示出来。当图表即将显示时，只需调用刷新并使用新数据在 DOM 中更新它，然后再显示它。这当然比做同样的事情并每次都构建它的资源成本更低。

TL;DR 仅更新显示的元素。

【讨论】：