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>

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

1 个答案: