6

ajax経由でロードするjsonファイルに大量のデータ行があります。

次に、このように各行のデータの一部を含むかなりの数の html コードを作成します。

var gl = $("#gameslist");
$.each(DATA.games, function(index, value) {
  gl.append( '<div>... lots of html code here ... '+value.somedata+'</div>');
}

これは、特にモバイル サファリ ブラウザではかなり遅いようです。これを高速化するためのトリックや jquery プラグインはありますか?

編集:要求に応じて、ここにajax呼び出しがあります:

$.ajax({
  dataType: "json",
  url: "../games.json"
})
.done(function(gamesjson){
    DATA = gamesjson;
    buildPage(); // this one is calling the above code
  })
.fail(function(){
    console.log("games.json error");
  })
;
4

2 に答える 2

4

遅い原因DATA.gamesは巨大になる可能性があり、呼び出していますが(キャッシュされています) 、ループの繰り返しごとに$("#gameslist")
使用しています。append()

for物事をスピードアップするには、HTML の文字列表現 (DIV とデータを含む) を保持する変数を作成+=します。$("#gameslist")

ここでは、劇的な違いを示すライブ デモを作成しました。

わずか1000回の繰り返しで、HTML の複雑さは4要素/繰り返し
のみ ループ内での 使用.append()= ~100ms
1 回のみの 使用.append()(ループ後) = ~30ms

両方のテストでfor loop...それはすべて.append()、正しい方法/場所で使用することだけでした。

と古き良き の速度の違いに話を戻すと、興味深い jsPerf を見つけました。$.eachfor

http://jsperf.com/browser-diet-jquery-each-vs-for-loop (注:高いほど良い)


メモ:テストスニペット:

var initialTime = new Date().getTime();

for(var i=0; i<10000; i++){
   // your code
}

console.log( new Date.getTime() - initialTime ); // ms
于 2013-09-10T16:26:49.833 に答える