目前我正在创建一个类似于表格的Web UI。标签位于顶部，它们共享相同的公共区域以显示其相关数据。
我有三个问题：
插入和删除DOM元素是一项昂贵的操作吗？
jQuery append()和remove()方法可以分别用于插入和删除DOM元素吗？
如果价格昂贵，有哪些有效的替代方案，例如show()和hide()，还是还有其他什么？
答案 0 :(得分：3)
“我很好奇......插入和移除dom元素是一项昂贵的操作吗？”
大多数浏览器都会免费提供。但是，严重的是，任何导致浏览器重新绘制页面的操作都可能“昂贵”，如果你做了太多的话。显示/隐藏也会导致重新绘制，但是（未经测试）我希望它比追加/删除要快一些。
您描述的标签界面可能会涉及一次添加/删除相当多的元素，这比仅显示/隐藏每个标签的容器div更昂贵。
“是jquery追加和删除方法分别插入和删除dom元素操作？”
是。 （如果方法名称不明显the documentation那么。）
“如果它们价格昂贵，有效的替代方案是什么......展示和隐藏，还有什么吗？”
使用.show()和.hide()是我的偏好，因为它可能会使你的JS比你必须追加和删除要简单得多。正如我已经提到的，对于一个标签类型的界面，您需要一次显示/消失元素组，您可以只显示/隐藏包含当前标签的所有元素的div。子元素将与父母一起显示/隐藏。
使用jQuery .show()和.hide()或其他动画方法，例如.fadeIn()和.fadeOut()，您可以在标签之间添加一些不错的过渡。
在一般意义上，编码您想要首先的效果，并担心如果您发现效果不佳，请在以后提高效率。
答案 1 :(得分：1)
请注意，jQuery.remove不仅仅是从DOM中删除元素。从文档中，“除了元素本身之外，还删除了与元素相关的所有绑定事件和jQuery数据。”所以这比简单的DOM操作更昂贵。
答案 2 :(得分：1)
<强>重绘
当对影响可见性但不影响布局的元素进行更改时，会发生重绘。例如，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/