javascript - 更快地操作现有的 HTML 或删除 HTML 然后重新创建它？

Question

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

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

请记住，当我重新创建 li s，它们根本不在 DOM 中，因此在重新创建它们时没有重绘/回流。重绘仅在我重新添加新创建的 ul 时发生.

我和一位同事谈过，他说最好在创建 HTML 元素后更新它们，而不是每次都重新创建它们。我正在考虑走这条路，但后来我想到更新现有的 li s 实际上会导致重绘 50 个元素，而不是只用 empty() 重绘一个。然后重新附加新创建的 ul .

想法？

Answer 1

作为rsp says ，您需要分析您的解决方案，因为哪种解决方案最快取决于标记的结构及其运行的特定浏览器。当然，如果您对当前获得的速度不满意，那么这一切努力也是值得的!

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

1. 将您的新内容构造为 HTML 字符串 ( [...].join("") )，然后使用 .html() 应用. 优点:通常比方法 #2 更快。 缺点:不一定太多，可能会留下陈旧的 jQuery 数据/事件(即，如果您不小心，可能会泄漏)。

2. 使用 jQuery 在文档之外构建新内容(例如，将所有 <li> 放入 <ul> 中，然后在构建完成后将 <ul> 插入文档中), 然后正常插入。 优点: 往往比方法 #1 更容易阅读。 缺点:标记越复杂，性能越差。

3. 从文档中删除现有节点(理想情况下，单个父节点，如 <ul> )，进行更改，然后重新插入它们。 优点: 可能比方法 #2 更清晰、性能更好，尤其是在复杂标记上。 缺点:如果渲染之间的元素数量发生变化，则变得更加复杂。

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