javascript - 网页div清空与隐藏

Question

当有 2 <div> 时元素都具有相当数量的图形内容，并且一次只显示一个，是隐藏一个未显示的元素更好，还是清空它并再次重新插入 html 标签？

当你隐藏时，一切都留在内存中吗？

Answer 1

答案很可能是:这取决于情况。

作为人类，我们对不同操作的性能要求有一些方向，但在这种情况下，当您不确定时，最佳实践是估计和基准测试。我们的想法是了解每种方法的折衷方案是什么:

首先，也是更简单的，是对隐藏 div 的内存影响进行基准测试。请注意，隐藏的 <div>保存在内存中，但不在页面中渲染，因此比渲染元素占用的内存更小。测量这一点很容易完成，甚至只需使用 Chrome 任务管理器即可。检查两者之间的多次更改，并测量使用每种方法时的内存占用量。真的像你想象的那么重要吗？

第二个稍微复杂一点:衡量重新加载和重新渲染对客户端系统以及应用程序用户体验的影响。最好是使用较弱的机器，甚至可能是连接速度较慢的机器。测量所产生的延迟(如果有)(如果不使用代码和报告)，至少根据您的感觉，并尝试测量 CPU 峰值和进程减慢(如果有)。以缓慢和快速的方式在 div 之间多次切换。还是感觉很光滑吗？

在这种情况下，我倾向于猜测内存占用量比您想象的要小得多，但这只是我的经验。我相信隐藏和展示比清空和重新装载需要更少的努力。

也就是说，我确信在完成这两项操作之后，您可能会非常清楚什么是适合您的方法。如果内存占用量很小，则隐藏；如果内存占用量太大，值得缓慢地重新加载，则重新加载。只有您可以测量并找出界限在哪里。

<小时/>

旁注:隐藏时，最佳做法是使用 display:none; 。这可确保从渲染树中删除元素，从而提供比 opacity: 0; 更好的性能。/visibility: hidden; ，尽管如果您需要其中之一来实现特定功能，请使用它们。如果您不需要该功能，请使用 display: none; 。另请注意 jQuery 的 .hide()使用display: none; ，所以这是最佳实践。来自 jQuery .hide()文档:

This is roughly equivalent to calling .css( "display", "none" )

<小时/>

来源:

• 网络浏览器的工作原理:Render Tree Construction
• jQuery 文档:.hide()
• jQuery 文档:.empty()