从DOM插入和删除元素是否昂贵？

Question

目前我正在创建一个类似表格的Web UI。 标签位于顶部，它们共享相同的公共区域以显示其相关数据。

我有三个问题：

1. 插入和删除DOM元素是一项昂贵的操作吗？

2. 可以使用jQuery append()和remove()方法分别插入和删除DOM元素吗？

3. 如果它们很昂贵，那么有效的替代方案如show()和hide()还是还有什么？

Answer 1

“我很好奇......插入和移除dom元素是一项昂贵的操作吗？”

大多数浏览器都会免费提供。 但是，严重的是，任何导致浏览器重新绘制页面的操作都可能“昂贵”，如果你做了太多的话。 显示/隐藏也会导致重新绘制，但是（没有经过测试）我希望它比追加/删除要快一些。

您描述的选项卡界面可能会涉及一次添加/删除相当多的元素，这比仅显示/隐藏每个选项卡的容器div更昂贵。

“是jquery追加和删除方法分别插入和删除dom元素操作？”

是。 （如果方法名称没有使文档显而易见。）

“如果它们价格昂贵，那么有效的替代方案......展示和隐藏，还有什么吗？”

使用.show()和.hide()是我的偏好，因为它可能会令你的JS要比如果你要追加和删除那么复杂。 正如我已经提到的，对于一个标签类型的界面，您需要一次显示/消失元素组，您可以只显示/隐藏包含当前标签的所有元素的div。 子元素将与其父元素一起显示/隐藏。

还使用jQuery .show()和.hide()或其他动画的方法，如.fadeIn()和.fadeOut()您可以添加标签之间的一些很好的过渡。

在一般意义上，代码你想先和担心使之更为高效以后，如果你发现它并没有表现良好的效果。

Answer 2

请注意，jQuery.remove不仅仅是从DOM中删除元素。 从文档中，“除了元素本身之外，还删除了与元素相关的所有绑定事件和jQuery数据。” 所以这比简单的DOM操作更昂贵。

Answer 3

重绘

当对影响可见性但不影响布局的元素进行更改时，会发生重绘。 例如， opacity ， background-color ， visibility和outline 。 重绘是昂贵的，因为浏览器必须检查DOM中所有其他节点的可见性 - 在更改的元素下可能已经看到一个或多个节点 。

回流

回流影响更大。 这是指重新计算所有元素的位置和尺寸 ，这导致重新渲染部分或全部文档。 更改单个元素可能会影响所有孩子，祖先和兄弟姐妹。

两者都是浏览器阻止; 用户或您的应用程序在重绘或重排期间都不能执行其他任务。 在极端情况下，CSS效果可能会导致JavaScript执行速度变慢。 这是您遇到诸如抖动滚动和无响应接口等问题的原因之一。

了解何时触发回流是有用的：

添加，删除或更改可见DOM元素首先是显而易见的; 使用JavaScript更改DOM将导致重排。

添加，删除或更改CSS样式

同样，直接应用CSS样式或更改类可能会改变布局。 更改元素的宽度可以影响同一DOM分支上的所有元素及其周围的元素。

CSS3动画和过渡

动画的每一帧都会导致重排。

使用offsetWidth和offsetHeight

奇怪的是，读取元素的offsetWidth和offsetHeight属性可以触发初始回流，因此可以计算出数字。

用户操作

最后，用户可以通过激活：悬停效果，在字段中输入文本，调整窗口大小，更改字体尺寸，切换样式表或字体来触发回流。

回流处理流量命中率会有所不同。 某些浏览器在某些操作中比其他浏览器更好。 有些元素比其他元素更昂贵。

资料来源： https ： //www.sitepoint.com/10-ways-minimize-reflows-improve-performance/