这是dom操纵吗？

Question

我知道大量的DOM操作很糟糕，因为它会导致重绘等。

但是做什么呢

var container = $('<div />');
{repeat:20}
container.append(<div>content</div>);
{endrepeat}
$('#actualElement').html(container.html());

即使不是DOM操作，也不好吗？

Answer 1

不，没关系，因为container没有附加到DOM。这是向DOM添加大量元素的首选方法 但是通过使用html()，您将丢失所有事件处理程序或添加到元素的data。如果你想保留它们，请考虑使用它：

$('#actualElement').empty().append(container.children());

您也可以使用DocumentFragement，但在使用jQuery时，我会坚持使用jQuery。

更新：要回答实际问题：是的，它是DOM操作，但是您只能向DOM添加一次，这是您可以获得的最佳功能（除了根本不插入;））

Answer 2

当然，您通过插入和创建新节点来操纵 DOM 。这很可能会导致 reflow ，这很慢，但可能不会“糟糕”。

如果您想创建/更改标记，则需要进行权衡。

正如我在评论中所提到的，用“好”或“坏”之类的方式来思考它可能是错误的。如果你想通过DOM中的Javascript动态地改变某些东西，那么就无法在某些时候进行重排。您唯一能做的就是，通过仅执行一次DOM访问并在内存中完成剩余的工作来避免不必要的重排/重绘。

Answer 3

不，不错。

或者，它与重新绘制的DOM操作相比并不差（或更好）。实际上，你正在操纵DOM。

假设您不仅仅是为了娱乐而操纵DOM，您可能还有这样做的目的。如果有其他解决方案不需要你进行DOM操作，那些可能会更好，但如果没有（或者你找不到它们），如果它完全符合你的要求，那么这个解决方案怎么会出错？ ？

Answer 4

是的，那就是DOM操作。但它可能比逐个插入组件更快。

但是在大​​多数浏览器中，只应重新绘制/重排一次（当您插入构建的结构时）。

您应该对它进行基准测试，并将其与其他选项进行比较（例如将HTML作为字符串插入）。