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

Jquery压力测试

1 个答案: