3

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

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

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

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

想法？

4

2 回答 2

2

正如rsp 所说，您需要分析您的解决方案，因为最快的解决方案取决于您的标记结构和运行它的特定浏览器。当然，如果您对当前获得的速度不满意，这也是值得进行所有这些努力的！

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

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

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

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

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

于 2011-03-05T17:26:26.543 回答
1

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

于 2011-03-05T16:59:47.613 回答