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

Question

将隐藏HTML文档的复杂部分隐藏在屏幕外DIV中的性能影响如下:

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

与使用"display:none"或"visiblity:hidden"相比？

是否有性能/内存使用惩罚？有多糟糕？如果目标是移动浏览器(iPhone/Android),这是否可取？

Answer 1

这取决于浏览器。这是关于浏览器中渲染、回流重绘的好文章。因此，从理论上讲，当侧面发生更改时，不应渲染它，因为当父元素发生更改时，所有绝对定位元素都不会重新渲染。因此它的性能应该比 display:none 更好，后者将在 IE 中重新渲染。但浏览器内存中仍然有大量 DOM 元素。因此，也许最好将元素从 DOM 中取出，稍后再添加它们。