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

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

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

我一直试图通过将

request.responseText

替换为

JSON.parse（JSON.stringify（dict）），使其在字典中起作用但是我在让它开始请求时遇到了问题，因为它不在文件中

我该怎么做？如果我不应该使用数据列表，你推荐什么替代方案

提前感谢。
可以提高性能的一个方面是使用文档片段，因为写入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);

获得更好性能的即时方法是首先构建HTML字符串，然后将其分配给innerHTML

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

var htmlStr=''；
for（dict中的var键）{
if（dict.hasOwnProperty（key））{
htmlStr+=“”+key+“”；
}
}
combo.innerHTML=htmlStr；

差别是巨大的：
DOM是出了名的慢。您可以尝试手动筛选并仅显示前X个元素。正如znap026所指出的，使用文档片段也有助于加快速度


“严格使用”；
var data=Object.keys（document.sort（），
datalist=document.getElementById（“datalist”），
输入=document.getElementById（“输入”）；
函数搜索（）{
var term=input.value.toLowerCase（）；
var=0；
var frag=document.createDocumentFragment（）；
for（[].slice.apply（datalist.childNodes）的var子级）{
datalist.removeChild（child）；
}
对于（数据的var项）{
if（item.toLowerCase（）.indexOf（term）==0）{
let option=document.createElement（“option”）；
option.value=项目
附件（可选）；
如果（++发现>10）断开；
}
}
数据表。追加子项（frag）；
}
搜索（）；
input.addEventListener（“输入”，搜索）

可能有帮助。这是另一种方法，他们使用typeahead而不是选择框。代码的一个主要问题是，您触摸DOM的次数达到了2000次。请参阅另一个只涉及DOM一次的解决方案（使用jQuery，但可以轻松地重写为vanilla JS），谢谢，这要快得多。我之前尝试过添加，看看这是否提高了性能，但是每次迭代我都会在组合中添加一个选项，所以同样糟糕。我以前从未使用过
documentFragment
。很好知道。非常聪明地使用大数据集！为了更好地理解，如果这真的更快，那么它也意味着JavaScript数组过滤比本地C代码（Chrome）做同样的过滤更快。我敢打赌，将整个集合放到数据列表中会允许Chrome通过优化的机器代码而不是JIT JavaScript运行时代码执行相同的过滤。如上所述，现在有两个过滤器循环：一个由JS对输入进行更改以改变DOM，另一个由浏览器对现在过滤的集合进行过滤。@Sukima-我相信这与您描述的略有不同。虽然本机C代码在数组过滤方面可能比JavaScript快，但在创建几千个DOM节点之前，它甚至可能无法开始过滤。此外，现代JavaScript引擎能够优化某些“热门”函数。。。因此，即使过滤性能的差异也可以忽略不计。我绝对建议在下注之前进行一些性能测试。你所有的鸡都是属于我们的！
var htmlStr = '';
for (var key in dict) {
    if (dict.hasOwnProperty(key)) {
        htmlStr += "<option value=\"" + dict[key] + "\">" + key + "</option>";
    }
}
combo.innerHTML = htmlStr;