3

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

  1. 克隆下面显示的代码骨架（使用 cloneNode() ），使用类似div.childNode[3].childNode[1].textContent = "Task Name"更新其中的每个文本，将其附加到父级（使用 parent.appendChild() ）

  2. 创建一个 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 添加 div 在性能方面是否更好，还是应该{% for loop %}使用 Django 将任务行添加到页面？

4

4 回答 4

2

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

至于性能，如果您仍然想自己做，无论您选择克隆还是创建，对于循环中的 100 个项目执行此操作最重要的是，不要将每个元素附加到文档内循环，但使用 DocumentFragment 代替：将 div 一个接一个地附加到片段中，在您完成循环遍历您的项目后，将现在包含所有这 100 个项目的片段附加到您的文档中。

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

于 2013-05-24T12:22:52.717 回答
2

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

  1. 创建一个文档片段。
  2. 使用片段构建模板。
  3. 深度克隆片段。
  4. 修改克隆。
  5. 创建实际的根元素。
  6. 将克隆附加到根元素。

根据需要重复 3-6 次。

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

于 2018-04-24T17:35:25.167 回答
1

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

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

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

于 2013-05-24T12:11:50.610 回答
0

克隆 div 更快。

看看这个性能测试。

于 2013-05-24T12:13:44.630 回答