这是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。这很可能导致回流，这很慢，但可能不是“坏”。

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

正如我在我的评论中提到的，从“好”或“坏”的角度考虑它可能是错误的。如果你想通过DOM在飞行中改变某些东西，那么在某些时候没有办法回流。只有你可以做的是，避免不必要的回流/重做只做一个DOM访问并在内存中完成其余的工作。

Answer 3

不，它不坏。

或者，它不比关于重绘的DOM操作更差（或更好）。其实，你的是操纵DOM。

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

Answer 4

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

但在大多数浏览器中，只应重绘/重新焊接一次（插入构建的结构时）。

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