从具有大量不同模块加载/卸载的SPA的角度思考。例如：
<body>
<div class="container" id="user-landing" style="display:none">
<h2 class="title">User Page</h2>
</div>
<div class="container" id="home-feed">
<h2 class="title">Feed</h2>
</div>
</body>
像$('#user-landing').show()一样隐藏和显示工作正常，但应用程序变得越大，就越需要注意不要重用其他模块中已经存在的.classes或#ids - 冒着不良行为的风险。
销毁或取消设置 DOM 元素可以防止意外地针对 DOM 元素，但代价是什么？
你更好的选择介于两者之间，许多其他框架都是这样做的。 将其从 DOM 中删除，但不要销毁它。
为此，您只需获得对它的引用，然后将其删除。你仍然会把它放在一个变量中(所以它不会被破坏(，但它也不是 DOM 的一部分，所以它不会碰到其他类和 id。
const someElement = document.querySelector('some-selector');
someElement.parentNode.removeChild(someElement); // remove
大多数框架都有某种缓存来跟踪所有这些。当它们不应该被渲染时，它们只是不会被渲染，但它们仍在缓存中以便快速添加回来。
至于性能，除了在RAM开始成为一个巨大的问题的极端情况下，保持缓存和分离总是比破坏和重新创建更好。
你可以看看 反应 来评估这个成本。据我了解，当您在使用 react 的单页 Web 应用程序中切换页面时，它将破坏或至少从 dom 中删除新页面中未使用的所有 dom 元素。