Question

我想动态地将div添加到我的html页面。服务器发送一个列表，其中包含任务的名称，描述，日期等。对于每个任务，必须将一个类似this的div添加到正文中。所以，我有两种创建它的方法 -

克隆下面显示的代码框架（使用cloneNode（）），使用div.childNode[3].childNode[1].textContent = "Task Name"之类的内容来更新其中的每个文字，将其附加到父级（使用parent.appendChild（））
创建一个div（使用createElement（）），添加类和样式，添加包含任务名称，描述，日期等的子项，将其附加到父母。

考虑到列表服务器要发送的最多可以包含100个任务，那么性能明智哪种方法更好？此外，还有其他方法吗？

<div class="task-row min-width900" id="task_row" style="display: none">
    <div class="div-inline pull-left min-width25" style="margin-left: 5px">
        <input type="checkbox" class="checkbox" id="task_row_checkbox">
    </div>

    <div class="div-inline pull-left min-width30" style="margin-right: 2px; border-right: 1px solid #dedede;">
        <a data-toggle="collapse" data-target="#collapse11" href="#" style="text-decoration:none; color:#4d4d4d; font-size: 20px;" id="subtask_count">
            +2
        </a>
    </div>

    <div class="dropdown div-inline pull-left min-width300" style="width: 26%;">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style="text-decoration:none; color:#4d4d4d; font-size: 15px;" id="name_link">
        <strong id="name">Summer's here: Lets clean the house</strong>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li><a href="#"><i class="icon-ok"></i>&nbsp;Done</a></li>
            <li><a href="#"><i class="icon-minus-sign"></i>&nbsp;Dismissed</a></li>
            <li><a href="#"><i class="icon-trash"></i>&nbsp;Delete</a></li>
        </ul>
    </div>

    <div style="width: 15%;" class="div-inline min-width200 task-tags" id="tags">
        <a href="#" style="text-decoration:none">
            <span class="label label-important">Work</span>
        </a>
        <a href="#" style="text-decoration:none">
            <span class="label label-warning">Downtown</span>
        </a>
    </div>

    <div class="div-inline task-description" style="width: 32%">
        <a href="#" style="text-decoration:none">
            <span class="muted" id="description">It's that time of the year again ...</span>
        </a>
    </div>

    <div style="width: 10%" class="div-inline min-width130 pull-right">
        <a href="#" style="text-decoration:none; color:#4D4D4D;">
            <strong style="font-size: 30px;" id="due_date">13.09.12</strong>
        </a>
    </div>

    <div style="width: 10%" class="div-inline min-width80 pull-right">
        <a href="#" style="text-decoration:none; color:#4d4d4d;">
            <strong id="start_date">2 days ago</strong>
        </a>
    </div>
</div>

由于

更新：我正在为这个应用程序使用Django框架（任务行是其中的一部分）。那么，是通过JS更好地提高性能，还是应该使用Django的{% for loop %}将任务行添加到页面中？

Answer 1

据此，cloneNode的性能稍好一些： http://jsperf.com/clonenode-vs-createelement-performance/2

但是，我真的建议你看看像KnockoutJS这样的东西： http://knockoutjs.com/examples/simpleList.html

从长远来看，它将拯救你的理智。

Answer 2

在我目前的项目中，我动态创建了大约600个元素，每个元素包含大约10个嵌套子元素。除文本节点和图像的src属性外，它们大多相同。我发现创建和修改这些元素的最佳纯JS方式需要10-15ms，其工作方式如下：

创建DocumentFragment。
使用片段构建模板。
深度克隆片段。
修改克隆。
创建实际的根元素。
将克隆附加到根元素。

根据需要重复3-6次。

根据我在Chrome 66 / Windows（https://jsperf.com/creating-multiple-nested-elements/1）上的测试，这比从头创建每个元素快大约10倍，比使用非DocumentFragment作为模板根快3倍。我想，你想要克隆的结构越复杂，好处就越大。

Answer 3

克隆div的速度更快。

查看此performance test。

Answer 4

我同意JS模板引擎可能是最好的解决方案。

至于性能，如果你仍然想自己做，无论你是选择克隆还是创建，最重要的是为循环中的100个项目做这件事，不要将每个元素附加到循环中的文档，但是使用DocumentFragment：将div一个接一个地附加到片段，在完成循环遍历项目之后，将片段（现在包含所有这100个项目）附加到文档中。 / p>

（A DocumentFragment只是一个“没有灵魂”的临时容器 - 当你最终将片段附加到文档时，它只会“溶解”而不会留下痕迹，所以效果将与单独添加100个元素相同。至于为什么它会提高性能，请参阅https://stackoverflow.com/a/13771168/1427878。）

Javascript创建并添加div vs Clone，Modify和Add div

4 个答案: