如何从字典填充大型数据列表（~2000 项）

Question

现在我正在使用以下代码，但它在 Chrome 上需要大约 10 秒，在 IE11 上需要大约 2 分钟，这是它最终被使用的地方。

for (var key in dict) {
    if (dict.hasOwnProperty(key)) {
        combo.innerHTML += "<option value=\"" + dict[key] + "\">" + key + "</option>";
    }
}

我正在阅读本教程：http : //blog.teamtreehouse.com/creating-autocomplete-dropdowns-datalist-element，其中建议在处理较大数量时使用 ajax，但我不确定 large 是指 100 个项目还是100,000 项。

var request = new XMLHttpRequest();

request.onreadystatechange = function(response) {
  if (request.readyState === 4) {
    if (request.status === 200) {

      var jsonOptions = JSON.parse(request.responseText);

      jsonOptions.forEach(function(item) {

        var option = document.createElement('option');
        option.value = item;
        dataList.appendChild(option);

      });

    } else {
      console.log("Failed to load datalist options");
    }
  }
};

request.open('GET', 'html-elements.json', true);
request.send();

我一直试图通过替换request.responseTextwith来使其适用于字典，JSON.parse(JSON.stringify(dict));但是我遇到了问题，因为它不在文件中，因此无法开始请求。

我该怎么做？如果我不应该为此使用 DataList，您推荐什么替代方案？

提前致谢。

Answer 1

您可以提高性能的一个领域是使用文档片段，因为写入 DOM 很慢。

var frag = document.createDocumentFragment();

for (var key in dict) {
    if (dict.hasOwnProperty(key)) {
        var option = document.createElement("OPTION");
        option.textContent = key;
        option.value = dict[key];
        frag.appendChild(option);
    }
}

combo.appendChild(frag);