2

假设我有这个标记，我想用它来进行对话。

<div id="dialog" title="Empty Alert Message">Alert message cannot be empty.</div>

我有 2 个解决方案：

  1. 将其添加到某处，假设在页面末尾
  2. 用于.after()将其附加到现有元素

然后应用于$('#dialog').dialog()该元素。

我听说修改 DOM 是一种非常糟糕的做法，因为 DOM 将被修改并且需要重新创建。这真的是低效的。

真的吗？我不是 JavaScript 专家。我不知道这件小事会减慢整个执行速度。

感谢您的帮助

4

1 回答 1

4

通过执行以下操作添加标记：

obj.innerHTML += newHTML;

确实很糟糕，因为它重新创建了 obj 层次结构中的所有对象并丢弃了该层次结构中的所有事件处理程序。

但是，以编程方式添加具有类似功能的 DOM 元素.after()是非常好的，因为它只是添加新元素并且不会干扰任何现有对象。

操作 DOM 需要时间的另一个方面是布局。当您向 DOM 添加新对象时，必须将它们纳入页面布局，然后必须重新绘制它们。如果 once 执行许多顺序 DOM 操作，这会显着减慢您的操作。但是，在您的两种情况下，您都将让对话框可见一次（假设它display: none已经在您的页面的 HTML 中），因此它的布局和显示方式都相同。

在您的两种情况下，任何一种方法都可以 - 不会有明显的性能差异。在原始页面中包含所有标记的优点是您可以更轻松地一次管理所有标记，并且不会将内容与您的 javascript 混合。如果您有数百个不同的可能对话框，那么您可能不希望它们都出现在主页中。

于 2013-10-25T16:46:53.477 回答