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

Posted 2023-05-09

【中文标题】我应该在对元素应用多种样式时从 DOM 中分离元素吗？

【英文标题】：Should I detach elements from the DOM while I apply many styles to them?

【发布时间】：2017-08-05 08:07:33

【问题描述】：

我担心性能和最佳做法。

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

然后，在另一遍中，我计算每个元素的位置。一切都绝对定位，并将通过CSS transform 接收x 和y 值。不幸的是，对于这些计算，我需要 DOM 中的元素，因为其中一些包含随机长度的文本，并且 我需要测量宽度/高度。否则我会直接在文档片段上执行第 3 步，甚至在它插入 DOM 之前。

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

【问题讨论】：

在页面加载之前在 html 中包含 html 内容总是最快的。为什么稍后要向 DOM 添加内容？

您可以在内存中的容器元素上使用jQuery.append()，然后在完成后将容器附加到DOM。这样只有 1 个 DOM 重绘

“一切都在绝对定位”这样就很疯狂

因为这部分 UI 没有 JS 一文不值。我想我可以通过 php 打印元素，但是如果没有启用 JS（或者如果 JS 执行由于错误而停止），那将是一堆无用的无样式未定位对象。甚至我的 CSS 都很短。这只是对内容的增强，它恰好由许多线条和形状组成。不过，这对内容本身并不是必需的。把它想象成一个粒子系统（它不是），但你还会用 PHP 创建粒子吗？

我有我的理由@zzzzBov - 例如jQuery masonry 将所有图块作为绝对定位的元素。我相信这也是合法的用途。

【参考方案1】：

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

我在某处阅读了有关在处理 DOM 时从 DOM 中删除元素的建议。虽然在向其附加元素时可能是这样，但对于样式操作则不成立。