什么将使用更少的CPU滴答：insertBefore vs innerHTML？

Question

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

Answer 1

最佳答案是：双向编写并在目标浏览器上对其进行分析。

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

但是，根据你正在做的事情以及你的目标浏览器，这些东西变化很大，最好每个方面创建一个代表性的测试，并根据经验来看。

Answer 2

1. 这取决于浏览器的实现，对此没有定义甚至经验法则。
2. 我非常怀疑任何人都会注意到差异。

所以，选择一个你最舒服的人，不要浪费宝贵的时间来辩论这个。

Answer 3

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

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

Answer 4

如果你需要表演，你可以这样做

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

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