Chrome 通过 jquery 清空我的列表框真的很慢答案

【问题标题】：Chrome is really slow to empty my listbox via jqueryChrome 通过 jquery 清空我的列表框真的很慢
【发布时间】：2011-03-12 00:35:22
【问题描述】：

我允许用户搜索一个列表框，该列表框缩小了所述列表框中包含的结果。

ajax 请求快速返回结果，chrome 能够快速添加结果。问题在于我实际上清空列表框的中间步骤。

代码如下：

function PopulateListBox(data, listBox) {

    var options = '';
    if (data != null) {
        for (var i = 0; i < data.length; i++) {
            options += "<option value=\"" + data[i].Id + "\">" + data[i].Name + '</option>';
        }
    }
    listBox.empty().append(options);
}

其中 data 是一个 JSON 数组，listbox 是一个带有列表框 ID 的 jquery 选择器（选择器是通过 ID 例如$('#listbox')。列表框中大约有 5-10k 个选项。

Firefox 甚至 IE 都能很好地处理这个问题，但 Chrome 很顽固（“最快的 js 引擎”谷歌怎么了？？）。

我正在使用最新的 jquery (1.5.1) 和 Chrome 11.0.696.3 dev。（我也在使用 FF 3.6 和 IE 8）

【问题讨论】：

标签： javascript jquery html google-chrome

【解决方案1】：

使用html() 方法而不是empty() 后跟append() 可能更快：

listBox.html(options);

【讨论】：

谢谢，但这无济于事。它确实使代码更清晰，所以我无论如何都会使用该方法，除非有更快的方法。我还尝试listbox.children().remove() 清空列表框，但这也无济于事。它们都会导致 chrome 锁定并询问我是要等待还是终止页面。

【解决方案2】：

出于好奇，您是否尝试过replaceWith？（docs 在这里。）您需要一个 div 来包装您的 listBox，这就是您传递给 PopulateListBox 函数的那个。您还需要手动将 options 变量与列表框打开和关闭标记信息（如下所示为伪 html）一起包装：

...
options = "<listbox tag>" + options + "</listbox tag>";
listBoxWrapperDiv.replaceWith(options);
...

【讨论】：

Chrome 像冠军一样处理了这个解决方案！谢谢班蒂克