使用JSON请求缓慢的JavaScript性能

时间:2016-07-14 21:47:56

标签: javascript json ajax

我有一个用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个。有时它根本不会加载,有时,当我在下拉列表中更改值时,它会滞后。这很慢。有什么办法可以让这段代码变得更快吗?任何使这项表现更好的建议将不胜感激。

1 个答案:

答案 0 :(得分:0)

尝试这样的事情

&#13;
&#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;
&#13;
&#13;