JSONリクエストによるJavaScriptパフォーマンスの低下

Question

JSONファイルをサーバーから取得する、バニラのJavaScriptで書かれたajaxリクエストがあります。しかし、これはうまく機能していません。ここに私のコードは次のとおりです。

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

は、少なくとも、あなたが記述限り、パフォーマンスの問題を引き起こしている必要がありますそこには何もありません。この

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