javascript document.createElement 或 HTML 标签答案

【问题标题】：javascript document.createElement or HTML tagsjavascript document.createElement 或 HTML 标签
【发布时间】：2013-02-17 09:50:58
【问题描述】：

我对以下编写代码的风格感到困惑。我想知道在文档中插入HTML标签的实用和高效方法是什么。

Javascript：

document.getElementById('demoId').innerHTML='<div>hello world and <a>click me</a> also</div>';

或

var itd=document.createElement('div'),
    ita=document.createElement('a'),
    idt=document.createTextNode('hello world');
    iat=document.createTextNode('click me');
    idn=document.createTextNode('also');

    ita.appendChild(iat);
    itd.appendChild(idt);
    itd.appendChild(ita);
    itd.appendChild(idn)

    docuemtn.getElementById('demoId').appendChild(itd);

哪种方法最快最好？

【问题讨论】：

为什么要创建这样的html标签？
你可以在 Chrome 上做一个 java 脚本分析来衡量这个
每个人都可能会说我疯了，但如果你创建了这个网站，然后我不得不维护它，我希望你使用选项 1 并尽可能长时间地避免选项 2。另外，我无法想象选项 2 比选项 1 更快。

标签： javascript html optimization createelement

【解决方案1】：

想想他们每个人都在做什么。第一个是获取字符串，对其进行解析，然后根据解析字符串的输出调用document.createElement、document.appendChild 等（或类似方法）。第二个是减少浏览器的工作量，因为您直接说明了您想要它做什么。

See a comparison on jsPerf

根据 jsPerf 选项 1 比选项 2 慢大约 3 倍。

关于可维护性选项 1 更容易编写，但称我为老式，我更喜欢使用选项 2，因为它感觉更安全。

编辑

在一些结果开始出现后，不同的结果激起了我的好奇心。我在安装了每个浏览器的情况下运行了两次测试，这是 jsPerf 在所有测试后的结果截图（操作数/秒，越高越好）。

因此，浏览器在处理这两种技术的方式上似乎存在很大差异。平均而言，选项 2 似乎更快，因为 Chrome 和 Safari 有利于选项 2 的巨大差距。我的结论是，我们应该只使用感觉最舒适或最符合您组织标准的任何一个，而不用担心哪个更有效。

这个练习教会我的主要事情是不要使用 IE10，尽管我听说过它的好消息。

【讨论】：

它非常棒:) 我第二次使用它。
我无法理解为什么这是真的，看看这篇文章，它很有启发性：stackoverflow.com/questions/2305654/…
有趣，但在我的浏览器 (FF 19) 中，innerHTML 更快（根据 jsperf，直接 DOM 操作慢了 12%）
@tyriar ，第二个会增加文件大小，不会让网站更重吗？
因为代码量增加了文件大小？这将使最微小的差异变得如此之小，以至于无法测量。如果你说它会继续添加元素，它不会因为我在每次测试之前清除 div（使用 innerHTML）。