在应用多种样式时，我应该从DOM中分离元素吗？

Question

我关注性能和最佳实践。

1. 所以我正在构建图形用户界面，并了解到在创建许多小元素时我不应该多次调用jQuery.append()。所以我得到了document.createDocumentFragment()所涵盖的内容。我正在添加元素，然后一旦完成，我将片段插入DOM（使用appendChild），

2. 然后，在另一个传递中，我计算每个元素应该在哪里。一切都绝对定位，并将通过CSS transform获得x和y值。不幸的是，对于这些计算，我需要DOM中的元素，因为其中一些元素是随机长度文本，而我需要测量widht / height 。否则，我会直接在文档片段中执行第3步，然后再将其插入DOM中。

3. 在最后一遍中，我将计算出的样式应用于jQuery.css()（可能会替换为setAttribute而不是jQuery）的所有内容作为循环的一部分（不幸的是，很多次调用 - 每个元素都有不同的x / y）。 在应用样式时，是否应该分离容纳所有元素的容器，然后将其重新附加到DOM？

Answer 1

由于缺乏兴趣，我决定自己测试一下。拉出700多篇文章（15000个节点）的元素，在大多数文章上应用各种CSS，然后将元素放回页面实际上慢了50％。让浏览器通过仅在需要布局时显示已更改属性的结果来完成其工作。

我在某处阅读了建议，以便在处理DOM时从DOM中删除该元素。虽然在向其添加元素时可能会出现这种情况，但这对于样式操作并不适用。