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 s缓存在一个变量中，并最后添加所有内容以防止DOM上出现过多的回流，这非常昂贵。

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