7

そのため、jQuery は内部でドキュメント フラグメントを使用してレンダリングを高速化することを読みました。しかし、each ループを使用して img 要素を DOM に追加しているこの状況で、jQuery が createDocumentFragment を使用するかどうかを誰かが知っているかどうか疑問に思っていますか?

var displayArray = []; // Lots of img elements

$.each(displayArray, function()
{
    $('#imgSection').append(this);
});

または、ブラウザのリフローの回数を減らすために、このコードを使用する必要がありますか?

var displayArray = []; // Lots of img elements
var imgHolder = $('<div/>');

$.each(displayArray, function()
{
    imgHolder.append(this);
});

$('#imgSection').append(imgHolder);

また、displayArray は、JSON ファイル内のパスに基づいて img 要素を作成する他のコード (ここには示されていません) によって取り込まれます。

アドバイスありがとうございます。

4

3 に答える 3

8

  1. いいえ、使用する場合$.each()、jQuery は a を使用しませんDocumentFragment。jQuery は、ループ内で何をしようとしているのかを知る方法がなく、各反復は独立しています。

  2. ドキュメント フラグメントのポイントは、リフローを制限するために 2 番目の例で行ったように、すべての新しい要素をラッパー要素でラップする必要がないことです。

  3. 要素の配列を自分で反復処理するのではなく直接渡すと、jQueryは明らかにドキュメント フラグメントを使用します。.append()

于 2013-01-30T23:23:57.813 に答える
8

要素を追加するためのすべてのループはなぜですか?

$('#imgSection').append("<div>" + displayArray .join("") + "</div>");

さて、それは要素です。

最も簡単な方法は、配列自体に追加を使用することです。

$("#out").append(elems);

1つのdivを使用して追加する他のオプションは

var div = $("<div/>").append(elems);
$("#out").append(div);

しかし、プリロードされていない限り、一度に多くの画像を追加するのはうまくいきません。それは、キューに入れられている一連の http 要求になります。

jsPerf テスト ケース

于 2013-01-30T23:02:08.893 に答える
0

リフローが本当に気になる場合 (そして表示が遅いことに気付いた場合) は、画像を保持する要素を非表示にして表示することができます。

var displayArray = […]; // Lots of img elements
var holder = $('#imgSection').hide();
for (var i=0; i<displayArray.length; i++)
    holder.append(displayArray[i]);
holder.show();
于 2013-01-30T23:36:45.577 に答える