更快地操作现有 HTML 或删除 HTML 然后重新创建它？答案

【问题标题】：Faster to manipulate existing HTML or removing the HTML and then recreating it?更快地操作现有 HTML 或删除 HTML 然后重新创建它？
【发布时间】：2011-07-09 11:31:11
【问题描述】：

我正在进行的这个项目，我有一个元素列表并将它们转换为“图形”（不是真正的图形，但您可以将其称为伪图形）。我有我的数据集，我在数据上运行for 循环，然后为每个元素创建一个li 元素，创建和父ul，附加lis，然后将父元素附加到另一个DOM 元素（我们称之为祖父母）已经在页面上。之后，我必须根据用户交互对该列表进行后续更新。
另外，这都是在使用 jQuery 的上下文中。

现在，我的问题是 - 创建元素一次然后在每次后续调用中更新生成的 HTML 是否更快，还是重新创建每个元素更快，empty() 祖父元素（这将摆脱父元素ul)，然后重新添加新创建的ul（我现在正在这样做）？

请记住，当我重新创建 lis 时，它们根本不在 DOM 中，因此在重新创建它们时没有重绘/重排。仅当我重新添加新创建的 ul 时才会重新绘制。

我正在和一位同事交谈，他说最好在创建 HTML 元素后更新它们，而不是每次都重新创建它们。我正在考虑走这条路，但后来我认为更新现有的lis 实际上会导致重新绘制 50 个元素，而不是只用empty() 做一个大规模的元素然后重新添加新创建的ul。

想法？

【问题讨论】：

标签： javascript jquery performance repaint dom-manipulation

【解决方案1】：

我建议先分析您的代码。过早的优化是万恶之源。

【讨论】：

@dtan：是的。您的问题没有明显的答案，因为它取决于您拥有的数据的数量和结构，甚至取决于其操作的通常模式。你的同事说最好换个方式。但是你这样做的方式很糟糕吗？很有可能这两种技术都可以正常工作，并且需要 1 或 5 甚至 50 毫秒并不重要。如果这并不重要，那么请考虑使用您将来最容易维护的方法。我的建议是首先优化可维护性。

【解决方案2】：

作为rsp says，您需要分析您的解决方案，因为最快的解决方案取决于您的标记结构和运行它的特定浏览器。当然，只有当您对当前的速度不满意时，才值得付出所有这些努力！

然而，有三种基本方法，每种方法可能是最快的。第一个只会导致一次重绘；其他只有两个，如果你选择好你的父节点。

将您的新内容构建为 HTML 字符串 ([...].join(""))，然后使用 .html() 应用。 优点：通常比方法 #2 更快。 缺点：不一定很多，可能会留下陈旧的 jQuery 数据/事件（即可能会泄漏，如果你不小心的话）。
用jQuery在文档外构造你的新内容（例如把你所有的<li>s 放入一个<ul>，然后在构造完成后将<ul> 插入到文档中)，然后正常插入。 优点： 往往比方法 #1 更容易阅读。 缺点：标记越复杂，性能就越差。
从文档中删除现有节点（理想情况下，单个父节点，如 <ul>），进行更改，然后重新插入它们。 优点： 可能比方法 #2 更清晰、性能更高，尤其是在复杂标记上。 缺点：如果元素数量在渲染之间发生变化，则会变得更加复杂。

即使您进行了大量更改，最后一个也只会导致两次重绘，因为只有初始删除和最终插入会影响文档。更改文档外的元素不会导致重绘。

【讨论】：