Javascript 在DOM中插入和删除元素是否昂贵？

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

我有三个问题：

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

jQuery

append（）

和

remove（）

方法能否分别用于插入和删除DOM元素

如果它们很昂贵，有哪些有效的替代方案，例如

show（）

和

hide（）

或者还有其他选择吗

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

大多数浏览器都会免费使用。不过，说真的，如果你做得太多，导致浏览器重新绘制页面的任何操作都可能“昂贵”。显示/隐藏也会导致重绘，但是（在没有测试的情况下）我希望它比附加/删除要快一点

不过，您描述的选项卡界面可能需要一次添加/删除相当多的元素，这比简单地为每个选项卡显示/隐藏容器div要昂贵得多

“jquery append和remove方法是否分别插入和删除dom元素操作？”

对。（如果方法名称没有使这一点变得明显，则会使其变得明显。）

“如果它们很昂贵，有什么有效的替代方案……展示和隐藏，还有其他吗？”

使用

.show（）

和

.hide（）

是我的首选，因为这可能会使您的JS比必须附加和删除的JS复杂得多。正如我已经提到的，对于一个选项卡类型的界面，您需要使元素组立即出现/消失，您可以显示/隐藏一个包含当前选项卡所有元素的div。子元素将与其父元素一起显示/隐藏

另外，使用jQuery

.show（）

和

.hide（）

或其他动画方法，如

.fadeIn（）

和

.fadeOut（）

，您可以在选项卡之间添加一些漂亮的过渡

---

一般来说，首先编写您想要的效果代码，如果您发现它的性能不好，则担心以后会提高效率。

请注意，jQuery.remove的作用不仅仅是从DOM中删除元素。从文档中可以看出，“除了元素本身，所有与元素相关联的绑定事件和jQuery数据都被删除了。”因此这比简单的DOM操作要昂贵

重新绘制

对影响可见性但不影响布局的图元进行更改时，会发生重新绘制。例如，

不透明度

，

背景色

，

可见性

，以及

轮廓

重新绘制代价高昂，因为浏览器必须检查DOM中所有其他节点的可见性-一个或多个节点可能已在更改的元素下可见

回流焊

回流的影响更大。这是指重新计算所有元素的位置和尺寸，从而重新呈现部分或全部文档。更改单个元素会影响所有子元素、祖先元素和兄弟元素

两者都是浏览器阻塞；在重新绘制或回流发生期间，用户或应用程序都不能执行其他任务。在极端情况下，CSS效果可能会导致JavaScript执行变慢。这是您遇到诸如快速滚动和界面无响应等问题的原因之一

了解何时触发回流非常有用：

添加、删除或更改可见DOM元素 第一个是显而易见的；使用JavaScript更改DOM将导致回流

添加、删除或更改CSS样式

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

CSS3动画和过渡

动画的每一帧都会导致回流

使用网外宽度和网外视线

奇怪的是，读取一个元素的offsetWidth和offsetHeight属性会触发一个初始回流，从而可以计算出数字

用户操作

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

回流处理流命中率将有所不同。某些浏览器在某些操作方面优于其他浏览器。某些图元的渲染成本高于其他图元

---

来源：

没有合理的方法来回答这个问题；您还没有定义“昂贵”的含义。任何导致重新绘制的操作如果做得过多都可能会很昂贵。这包括添加/删除元素、显示/隐藏元素以及调整/移动元素的大小。与添加/删除相比，更喜欢显示/隐藏。执行DOM操作时，尽量减少命令数量。（添加预填充的UL比逐个添加LI元素更有效。）