为什么删除元素比添加元素花费更多的时间?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (64)

我有一个很多行的表(如10.000)。 (注意:我意识到拥有一个很大的表是没有意义的,但我想了解下面的行为)。 当我收到新的数据时,我想先清除这些行。奇怪的是,清理表格比从头开始构建行要花费更多的时间。清理表格行html("")或纯JS innerHTML = ""需要1.5分钟,远远超过建立行本身,这需要不到一秒钟。

所以我的问题: - 为什么删除元素需要更多的时间比添加它们?“幕后”会发生什么? (请注意我的问题是为什么一个,我不寻找可能的解决方法)。

更新

我注意到表格行和单元格应用了浮动定义,当我删除浮动元素时,表格在实例中被清空。 我仍然非常想知道为什么 float会使行的移除速度变慢。 在Chrome中,需要25秒来清空表格,并且只需要23 ms将其附加到DOM。

*我阅读了以下文章,但他们更多地讨论了可能的解决方案,而不是关于删除元素需要更多时间而不是添加元素的问题,删除元素时会发生什么

提问于
用户回答回答于

如果你问为什么清空桌子应该比追加时间长1000倍,那么它就不应该:这是一个错误。

可以根据浏览器,版本,jQuery或操作系统的版本找到重要的性能差异,但25s vs 23ms太过分了。它似乎比你在某个地方进行O(N^2)手术。对于不到那些人打开票和浏览器的开发人员承认他们。

无论如何,删除元素并不总是更快,添加它们。我们的直觉认为,销毁应该比创建更快,但在操纵DOM时不一定是这样。jQuery和浏览器都需要做额外的工作来完成元素。

如果你看看当前的(3.2.1)jQuery append()函数的实现,你会发现它基本上做的是使用本地JS方法appendChild()。另一方面,

jQuery append()函数的(html()使用empty())需要遍历所有内部元素,并注意将相关数据(例如事件)移除到每个内部元素以防止内存泄漏。

而且,如果你只使用vanilla JS,浏览器在删除元素时仍然需要检查一大堆东西。

如果你愿意removeChild()innerHtml或者textContent()浏览器总是需要重新计算样式和布局.

这类错误很常见。如果使用关键字“removeChild”和“slow”搜索Chromium。有时他们会因修复引入回归而来来去去,涉及浮动元素一样。对你来说可能是特别有趣的,因为它证明了一些错误与你选择删除元素的方法没有关联,因为就像你的情况一样,当复杂的CSS规则应用于这些元素时,它会显示出来。

我无法在Firefox和Chrome中重现您的问题,所以我无法解决25秒或1.5分钟的确切原因,但它确实似乎是在更新版本中修复的错误。如果仍旧拥有相同的旧版本并且可以重现它,那么可能需要检查是否以相反的顺序(从开始lastChild)删除元素有所帮助。也许你避免重新计算所有浮动兄弟的位置后,你删除。

用户回答回答于

我想你在IE上的表现很差吧。

我想说那是因为$.empty方法调用removeChild在循环中,表中的每个已删除元素和该方法在IE中的性能总是很差

不管你用大DOM做什么在IE上表现不佳。

所属标签

可能回答问题的人

  • 人生的旅途

    10 粉丝484 提问6 回答
  • 无聊至极

    4 粉丝504 提问6 回答
  • 骑牛看晨曦

    5 粉丝522 提问5 回答
  • Richel

    8 粉丝0 提问4 回答

扫码关注云+社区

领取腾讯云代金券