通过将 DIV 渲染到屏幕外来隐藏 DIV 时的性能影响答案

【问题标题】：Performance implications when hiding a DIV by rendering it offscreen通过将 DIV 渲染到屏幕外来隐藏 DIV 时的性能影响
【发布时间】：2011-10-24 06:19:45
【问题描述】：

将 HTML 文档的复杂部分隐藏在屏幕外 DIV 中会对性能产生什么影响，例如：

<div style="position:absolute;top:-10000px;left:-10000px;">
  Lots of HTML here...
</div>

与使用“显示：无”或“可见性：隐藏”相比？

是否存在性能/内存使用损失？有多糟糕？如果目标是移动浏览器（iPhone/Android），这是否可行？

【问题讨论】：

浏览器足够聪明，不会渲染屏幕外的内容。我怀疑这有什么不同。
@Tim 我不太确定。例如，使用“可见性：隐藏”时仍必须计算几何图形，而“显示：无”则不是这种情况。对于屏幕外渲染我只是不知道，这就是我问的原因:)
我只是想你可能暗示浏览器将屏幕外的东西渲染到后台缓冲区中，我确定他们不会。您可能是对的，几何计算会有所不同。

标签： html performance show-hide

【解决方案1】：

这取决于浏览器。 Here 是一篇关于在浏览器中渲染、回流重绘的好文章。所以理论上它不应该在侧面发生变化时渲染，因为当父元素发生变化时，所有绝对定位的元素都不会重新渲染。所以它应该比 display:none 表现更好，例如 rerendered in IE。但是在浏览器内存中仍然有很多 DOM 元素。所以也许最好将元素从 DOM 中取出并稍后再添加。

【讨论】：

【解决方案2】：

就性能而言，您最好将 HTML 构建为字符串，一次性将其插入 DOM。 DOM 更改会触发重绘，因此 DOM 更改越少越好。

【讨论】：

OP 没有提及 Javascript 和 DOM。他只是在谈论 HTML 和 CSS。