Jqueryストレステスト

Question

$('#myClick').click(function() { 
      $('#fromList').find('option') 
      .remove() 
      .end() 

      for (var index = 0; index < 50000; index++) { 
       $('#fromList').find('option').end().append('<option value="' + index + '">Dist ' + index + '</option>').val('whatever'); 
      } 
     }); 

<select id="toList" name="drop1" class="listBox" multiple="multiple"> 
        <option value="1">item 1</option> 
        <option value="2">item 2</option> 
        <option value="3">item 3</option> 
        <option value="4">item 4</option> 
</select> 

大量のデータを選択ボックスにダンプするためにJqueryを使用しようとしています。今ではたいていの場合、これは選択ボックスに数百人しか投げ込まれませんが、時にはクライアントによっては50,000+を投げることもあります。

多くのデータをその場で選択ボックスに解析し、ページが依然として応答性が高いと期待できますか？

Ajaxはこのパフォーマンスを改善しますか？

このアイデアを一括してダンプする必要はありますか？

今すぐ上のコードでタイムアウトします。

Answer 1

パフォーマンスを向上させるには、optionを変数にキャッシュし、最後にすべてを追加してDOMの過度のリフローを防ぐことが最善です。これは本当に高価です。

var options = ''; 
for (var index = 0; index < 50000; index++) { 
    options += '<option value="whatever"' + index + '">Dist ' + index + '</option>'; 
} 
$('#fromList').append(options);