2

我有数百个项目列表，我需要定期更新 ajax 并在移动设备（主要是移动 wekbkit 浏览器）上显示。我更容易生成整个列表服务器端并使用innerHTML. 该列表主要是图片缩略图。我不希望屏幕闪烁过多或对他们的小型移动 CPU 造成太大的拖累。我的问题是：在更新<ul>列表、insertBefore客户端排序或innerHTML整个列表的情况下，什么表现更好？

4

4 回答 4

5

最好的答案是：以两种方式编写它并在您的目标浏览器上对其进行配置。

但是，在我之前的实验中，我通常发现在进行大更新时，innerHTML明显比通过 DOM 接口工作要快。这是有道理的：从根本上说，浏览器将 HTML 解析为其内部结构并显示结果。这是他们存在的理由，他们为此进行了高度优化。相比之下，大量的 DOM 调用需要通过一个可能适合也可能不适合浏览器内部结构的 API 来跨越 JavaScript/浏览器内部接口。当然，今天的情况与几年前大不相同。DOM 更新比以前更常见，也更快。

但是同样，这些东西会根据您正在做的事情和您的目标浏览器而变化很大，因此最好以每种方式创建一个有代表性的测试并根据经验进行查看。

于 2012-05-21T11:06:16.243 回答
0
  1. 这将取决于浏览器的实现，对此没有定义，甚至没有经验法则。
  2. 我非常怀疑是否有人会注意到差异。

因此，只需选择您最喜欢的那个，不要浪费宝贵的时间来讨论这个问题。

于 2012-05-21T11:04:45.237 回答
0

您可能想查看此页面：http ://www.quirksmode.org/dom/innerhtml.html并在几个移动设备上运行测试并获得一些数字。

但是，如果您关心性能，为什么不在服务器端排序并将其发送到客户端，那么每个节点都可以使用任何一种方法添加，但移动设备不必排序。

于 2012-05-21T11:09:29.933 回答
0

如果你需要性能，你可以这样做

  1. 从 DOM 树中移除父节点（UL 或 UL 的父节点....）
  2. 通过 insertBefore 或 innerHTML 将所有子项 (LI) 添加到列表中。innerHTML 更快
  3. 将父级添加到 DOM。

为什么要从 DOM 中删除父级？表现！浏览器只呈现两次页面。否则，它将为每个 DOM 操作呈现页面 - 每个插入！

于 2012-05-22T07:12:35.140 回答