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);