javascript - 当使用新值循环 2000 个元素的数组时，浏览器更新元素需要很长时间

Question

我正在重构我的代码，以便我的搜索机制搜索结果将从 ajax/json 获得结果。但是通过这样做，浏览器似乎停止响应(仅限当前页面选项卡)，直到数据填充到 select 标记

中

这是我正在做的。

for (i = 0; i < jsonData["outlet"].length; i++) {
         outlet.innerHTML += "<option value=" + jsonData["outlet"][i] + ">" + jsonData["outlet"][i] + "</option>";
    }

这些json数据的长度在2000左右

Answer 1

将其全部缓冲在内存中的字符串中。这样比较快。

然后，当字符串完成后将其输出到 HTML。

在您当前的代码中，您在每次迭代时都强制进行图形回流。页面的每次迭代都必须重新计算整个页面布局。这会花费大量的 CPU 周期。

function getBuffer(jsonData) {
        var buffer = [];
        for (i = 0; i < jsonData["outlet"].length; i++) {
                 buffer[i] = "<option value=" + jsonData["outlet"][i] + ">" + jsonData["outlet"][i] + "</option>";
            }
        return buffer.join('');
    }
    var jsonData = {outlet:["foo","bar","baz"]};
    for(flood = 3;flood<10000;flood++) {
        jsonData.outlet[flood] = 'fooding '+flood;
    }
    var outlet = document.getElementById('outlet');
    outlet.innerHTML = getBuffer(jsonData);

<select id="outlet"></select>