1

現在、検索から結果を受け取ると、結果をループしてリストに追加します (これにより、アイテムが追加されるたびにブラウザーがページを再レンダリングするようになります。これを確認する方法はありますか?)。

$.each(results, function(key, val){
    $(".results").append("<div>"+ val +"</div>");
});

2 番目のブラウザーのこの部分では、少し遅れます (アニメーションなどがあります...)。別の div.results を作成し、javascript で項目を追加してから、dom で置き換える方が効率的でしょうか? これを行う最も効率的な方法は何でしょうか? そして、これは通常どのように行われますか？

4

2 に答える 2

1

私がすることはdocument.createDocumentFragment()、そこで可能なすべての操作を使用して実行し、実際の DOM に一度触れることです。(ループに加えて、セレクターを一度キャッシュすることをお勧めします):

var frag = document.createDocumentFragment();
$.each(results, function(key, val){
    var a = document.createElement("div");
    a.innerHTML = val;
    frag.appendChild(a);
});
$(".results").append(frag);
于 2013-07-13T17:11:34.867 に答える
1

ループの繰り返しごとに DOM を再クエリしています。.resultsループ中に要素の数が変わると思わないのであれば、これを行う理由はありません。

また、パフォーマンスが気になる場合は、jQuery の使用を減らすことができます。

var frag = document.createDocumentFragment();
$.each(results, function(key, val){
    frag.appendChild(document.createElement("div"))
        .appendChild(document.createTextNode(val))
});

// Since you're using a class, I assume there's more than one `.results` element
$(".results").each(function(i, el) {
     el.appendChild(frag.cloneNode(true));
});
于 2013-07-13T17:12:32.107 に答える