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

Question

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

我有三个问题：

score 3 · Accepted Answer

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

大多数浏览器都会免费这样做。说真的，任何导致浏览器重新绘制页面的操作如果你做的太多都可能是“昂贵的”。显示/隐藏也会导致重绘，但是（未经测试）我希望它比附加/删除快一点。

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

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

是的。（如果方法名称没有使这一点显而易见，则文档会这样做。）

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

使用.show()and.hide()是我的偏好，因为它可能会使你的 JS 比你必须追加和删除的复杂得多。正如我已经提到的，对于需要让一组元素同时出现/消失的选项卡类型界面，您可以只显示/隐藏一个包含当前选项卡所有元素的 div。子元素将与它们的父元素一起显示/隐藏。

还可以使用 jQuery.show()或.hide()其他动画方法，例如.fadeIn()，.fadeOut()您可以在选项卡之间添加一些漂亮的过渡。

一般来说，先把你想要的效果编码，以后如果发现效果不好，再考虑提高效率。

score 1 · Accepted Answer

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

score 1 · Accepted Answer

重绘

当对影响可见性但不影响布局的元素进行更改时，会发生重绘。例如，opacity、background-color、visibility和outline。重绘成本很高，因为浏览器必须检查 DOM 中所有其他节点的可见性——一个或多个节点可能在更改的元素下变得可见。

回流焊

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

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

了解何时触发回流很有用：

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

添加、删除或更改 CSS 样式

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

CSS3 动画和过渡

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

使用 offsetWidth 和 offsetHeight

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

用户操作

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

回流处理流程命中会有所不同。有些浏览器在某些操作上比其他浏览器更好。有些元素的渲染成本比其他元素高。

3 回答 3