3

次のJavaスクリプトを変更して、より効率的にしたい

for(var i = 0; i < 1000; i += 1){
                var el = document.createElement('div');
                el.appendChild(document.createTextNode('Node ' + (i + 1)));
                document.getElementById('nodeHolder').appendChild(el);
}

理想的には、その背後にある理由が提供されれば幸いです。

どんなアイデアでも大歓迎です。

4

3 に答える 3

7

ドキュメントフラグメントを作成してそれに追加し、セット全体に対して単一の追加を行います。

var frag = document.createDocumentFragment();

for(var i = 0; i < 1000; i += 1){
    var el = document.createElement('div');
    el.appendChild(document.createTextNode('Node ' + (i + 1)));
    frag.appendChild(el);
}

document.getElementById('nodeHolder').appendChild( frag );

これで、getElementById一度だけ実行する必要があり、DOM は一度だけ更新する必要があります。

ドキュメント フラグメントは汎用コンテナです。DOM に追加すると、コンテナーは消えて、そのコンテンツのみが追加されます。

必要に応じて、コードを少し圧縮できます。

例: http://jsfiddle.net/7hagb/

var frag = document.createDocumentFragment();

for(var i = 0; i < 1000; i += 1){
    frag.appendChild(document.createElement('div'))
        .appendChild(document.createTextNode('Node ' + (i + 1)));
}

document.getElementById('nodeHolder').appendChild( frag );

さらに、非常に小さな最適化として、 を取り除き、必要な値を提供するようにループをi + 1変更しforます。

例: http://jsfiddle.net/7hagb/1/

var frag = document.createDocumentFragment();

for(var i = 1; i <= 1000; i += 1){
    frag.appendChild(document.createElement('div'))
        .appendChild(document.createTextNode('Node ' + i));
}

document.getElementById('nodeHolder').appendChild( frag );
于 2011-08-16T01:54:02.680 に答える
1

DocumentFragment を使用できます。これは軽量のノード コンテナーであり、DOM にノードを追加するときに DOM がリフレッシュおよびリフローするのを防ぎます。

var nodeHolder = document.createElement('div'),
    fragment = document.createDocumentFragment();
for (var i = 0; i < 1000; i ++ ) {
    var el = document.createElement('div');
    el.innerHTML = 'Node ' + (i + 1);
    fragment.appendChild(el);
}
nodeHolder.appendChild(fragment);
于 2011-08-16T02:10:09.450 に答える
0

DOM を使用せず、代わりに html を使用してください。たとえば、createElement を使用する代わりに

  abc = ""
  for(...){
  abc += "<div>Text " + i + "</div>";
  }

次に、ターゲットに追加します。それは醜いです、私は同意しますが、はるかに速く実行する必要があります

于 2011-08-16T01:51:22.320 に答える