Question

我有一个用Vanilla JavaScript编写的ajax请求，它从服务器获取一个JSON文件。但这表现不佳。这是我的代码：

var data = {
  "Description1": {
    "key1": "Value 1 here",
    "key2": "Value 2 here",
    "key3": "Value 3 here"
  },
  "Description2": {
    "key1": "Value 1 here",
    "key2": "Value 2 here",
    "key3": "Value 3 here"
  }
}

var table = document.querySelector('table');
var options = document.getElementById('option1Id');


var rows = '';
for (var p in data) {
  for (var k in data[p]) {
    if(options.selectedValue == 'Description1'){
    rows += '<tr><td>' + k + '</td><td>' + data[p][k] + '</td></tr>'
   }
   else if(options.selectedValue == 'Description2'){
     rows += '<tr><td>' + k + '</td><td>' + data[p][k] + '</td></tr>'
   }
  }
}
table.innerHTML = rows;

HTML代码段：

 <table></table>
    <select id="dropdown" onchange="getJson()">
      <option value="description1">Description1</option>
      <option value="description2">Description2</option>
   </select>

JSON正在填充表格，每次从下拉列表中选择不同的选项时，表格中的数据都会发生变化。但是，这需要大约10秒或更长时间才能加载，并且JSON文件中的键/值对少于100个。有时它根本不会加载，有时，当我在下拉列表中更改值时，它会滞后。这很慢。有什么办法可以让这段代码变得更快吗？任何使这项表现更好的建议将不胜感激。

Answer 1

尝试这样的事情

＆＃13;

 var rows='';
    d1=data.Description1
    d2=data.Description2
    for (var k in d1[p]) {        
        rows += '<tr><td>' + k + '</td><td>' + data[p][k] + '</td></tr>'
       }

    for (var k in d2[p]) {        
        rows += '<tr><td>' + k + '</td><td>' + data[p][k] + '</td></tr>'
       }

//multiple for combined with if statement affect the speed

＆＃13;

使用JSON请求缓慢的JavaScript性能

1 个答案: