页面速度优化：使用javascript与html写入DOM

Question

我有一个关于页面速度和代码优化的问题。我有一个页面，通过AJAX调用几乎100％填充。我的问题是：对于我来说，编写几个空的div，spans，无论是在页面的HTML中，然后使用javascript填充这些元素，我会更快吗？或者，在javascript中创建这些元素并插入和追加它们会更快吗？ 我不确定是否存在很大差异。因此，非常感谢这方面的任何帮助/建议。

Answer 1

几年前，我做了一个实验。分配给元素的innerHTML属性以创建复杂结构比使用重复createElement appendChild insertBefore等调用要快得多。我挖出了我做过的关于它的帖子（到Prototype＆amp; script.aculo.us邮件列表）;下方。

请记住，解析HTML并快速呈现 如果将包含复杂HTML结构的字符串分配给容器元素的innerHTML属性，那么您将从JavaScript层到浏览器的渲染层进行一次行程，之后浏览器将解析和呈现代码可以不间断地进行。

相比之下，如果你使用DOM API构建一些复杂的结构，不仅会发生很多跨层旅行（JavaScript - ＆gt; browser - ＆gt; JavaScript），而且浏览器也有使用DOM API而不是内部结构。

因此，通常值得看一个编写良好的JavaScript模板引擎（如果你想做这个客户端）。这些通常会将模板“编译”成一个易于处理的表单，并且在处理特定数据集时，他们会使用诸如通过Array#push将字符串构建为数组中的片段等技巧，然后获取最终结果通过Array#join传递""作为分隔符。对于大字符串，这可能比字符串连接更快，尽管它是否（以及在何种程度上）非常依赖于实现（Firefox的SpiderMonkey与Chrome的V8对比IE的JScript），与{{{ 1}}与DOM相比，它只会在很多的速度上变化。

几年前我正在谈论的消息（基本上说的是我上面所说的;哇，两年前），Here's the mailing list它指的是here's the Pastie copied to JSBin }，最后......这是代码：（注意代码是不意图是一个美丽而永远的快乐，它是一个快速的黑客......仍然但是，是的，我想，两年后，我现在想要更好一些东西了。）

将此转换为适用于jsPerf的内容可能值得。我现在没时间这样做了，我很害怕。

innerHTML

Answer 2

使用javascript执行此操作总是会慢一些，因为它会在页面加载之上运行，而不是使用它，因为向HTML添加元素会。但是，您也可以说，如果没有HTML中的元素，页面的实际负载会更少（尽管不是很明显）。

另一点是，javascript在垃圾收集方面非常糟糕，所以如果你正在进行大量的DOM调用，它最终会开始增加你的处理能力。

另外，如果您对维护语义网站感兴趣，那么您是否需要标签？没有javascript它会优雅地降级吗？等等。这取决于你想要采取的角度。

Answer 3

如果您正在创建大量元素，则innerHTML可以更快，但它不是官方DOM标准的一部分（尽管它得到了广泛的支持）。我的建议是使用骨架布局来提供页面，包括尽可能多的HTML页面本身，然后抓取对页面相关部分的引用，并使用标准DOM方法插入值。

这应该相当快，将保持演示文稿和逻辑分离，并且在未来的网站更改或重新设计的情况下可能会更灵活。

Answer 4

修改innerHTML而不是使用DOM方法。

根据Quirksmode上的这个benchmark of W3C DOM vs innerHTML，看起来所有经过测试的浏览器在HTML上比 更快

。