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

标签 javascript html json

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

这是我正在做的。

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

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

最佳答案

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

然后,当字符串完成后将其输出到 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>

关于javascript - 当使用新值循环 2000 个元素的数组时,浏览器更新元素需要很长时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35767385/

相关文章:

javascript - typescript :在对象的多维数组中分组(按ID)

html - 顶部图像与顶部图像一致?

android - 使用 GSON 抛出 IllegalArgumentException 的简单 JSON 解析

ios - SwiftyJSON 对象返回字符串

javascript - 如何获得主干分页以返回正确的长度?

javascript - 在单个页面上使用多个(猫头鹰)轮播

php - 使用 html 和 JavaScript 的表单创建测验

html - 如何更改 materialize css 中的默认按钮颜色?

jquery - jquery 设置的某些 css 属性不会显示在 html 元素上

python - 如何从请求帖子中解析我的 View 中的 json