Question

从具有大量不同模块的加载/卸载的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元素进行不必要的定位，但代价是什么？

Answer 1

更好的选择介于两者之间，很多其他框架都可以做到。从DOM中删除它，但不要破坏它。

为此，您只需获取对它的引用，然后将其删除。你仍然在变量中使用它（因此它不会被破坏），但它也不是DOM的一部分，所以它不会碰到其他类和ID。

const someElement = document.querySelector('some-selector');
someElement.parentNode.removeChild(someElement); // remove

大多数框架都有某种缓存，他们设法跟踪所有这些。当它们不应该被渲染时，它们只是没有被渲染，但是它们仍然在缓存中以便快速添加。

至于性能，除了在RAM开始成为一个巨大问题的极端情况下，保持缓存和分离将永远比破坏和重新创建更好。

Answer 2

你可以看一下反应来评估这个成本。根据我的理解，当您在使用react的单页Web应用程序中切换页面时，它将破坏或至少从dom中删除新页面中未使用的所有dom元素。

处理隐藏与破坏HTML DOM元素

2 个答案: