3

HTML ページに div を動的に追加したいと考えています。サーバーは、タスクの名前、説明、日付などを含むリストを送信します。タスクごとに、このような div を本文に追加する必要があります。だから、私はそれを作成する2つの方法があります -

  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 に答える
1

これによると、cloneNode はパフォーマンスがわずかに優れています: http://jsperf.com/clonenode-vs-createelement-performance/2

ただし、KnockoutJS のようなものを確認することをお勧めします: http://knockoutjs.com/examples/simpleList.html

それは長期的にあなたの正気を救います。

于 2013-05-24T12:11:50.610 に答える