代码之家 › 专栏 › 技术社区 › Reed

隐藏与销毁HTML DOM元素的处理成本

dom html jquery javascript

Reed · 技术社区 · 7 年前

从SPA的角度思考,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元素目标,但代价是什么?

2 回复 | 直到 7 年前

samanime 7 年前

更好的选择是介于两者之间,这是许多其他框架所做的。从DOM中删除它,但不要销毁它。

要做到这一点,只需获取对它的引用,然后将其删除。您仍然可以将其保存在一个变量中(这样它就不会被销毁),但它也不是DOM的一部分,所以它不会碰到其他类和ID。

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

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

至于性能,除了在RAM开始成为一个巨大问题的极端情况下,保持缓存和分离总是比销毁和重新创建要好。

macdja38 7 年前

您可以查看react来评估此成本。据我所知,在使用react的单页web应用中切换页面时,它将销毁或至少从dom中删除新页面中未使用的所有dom元素。

推荐文章

Ezz Deghedy · 如何获取数据和读取响应

1 年前

StuP · 响应式Vue组件在数据更改时不更新

2 年前

burr · 让jQuery选择器识别新添加的DOM元素[关闭]

3 年前

viboven · Javascript DOM未从ID检测到按钮,表示其为null[已关闭]

3 年前

Toufique E Joarder · 将<li>移动到第n个位置并使用JavaScript更改href链接

3 年前

HASEEB ALAM RAFIQ · 如何在react中获取QuerySelector所有html元素?

3 年前

J. Hu · “表单提交已取消,因为表单未连接”[重复]

7 年前

pploypiti · 选择所有其他ID不是“this”的元素。id'

7 年前

xiaolingxiao · 导航到页面后运行javascript

7 年前

Voodoobear · 如何将数字变量插入replaceWith(JavaScript)

7 年前