gpt4 book ai didi

javascript - 如何从字典中填充大型数据列表(~2000 项)

转载 作者:搜寻专家 更新时间:2023-11-01 05:22:15 26 4
gpt4 key购买 nike

现在我正在使用以下代码,但它在 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,但我不确定大是指 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.responseText 替换为 JSON.parse(JSON.stringify(dict)); 来使它适用于字典,但我因为它不在文件中,所以在开始请求时遇到了问题。

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

提前致谢。

最佳答案

您可以提高性能的一个领域是文档片段,因为写入 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);

关于javascript - 如何从字典中填充大型数据列表(~2000 项),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30336489/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com