javascript - 什么会使用更少的 CPU ticks : insertBefore vs innerHTML?

Question

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

Answer 1

最佳答案是:以两种方式编写并在目标浏览器上对其进行分析。

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

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