當使用新值循環2000個元素的數組時，瀏覽器更新元素需要很長時間

我正在重構我的代碼，所以我的搜索機制搜索結果將從ajax/json中獲得結果。但通過這樣做，瀏覽器似乎停止響應（僅限當前頁選項卡），直到數據填充爲止select標記當使用新值循環2000個元素的數組時，瀏覽器更新元素需要很長時間

這是我正在做的。

for (i = 0; i < jsonData["outlet"].length; i++) { 
     outlet.innerHTML += "<option value=" + jsonData["outlet"][i] + ">" + jsonData["outlet"][i] + "</option>"; 
    }

這些JSON數據Lenght是在2000年左右

來源

2016-03-03 Akash Kumar

2000不應該是一個在所有問題。 –

你確定這段代碼是導致頁面變慢的原因嗎？嘗試刪除它，或嘗試將2000降低到一個小數字，並檢查它是否有任何改變。 – TamarG

緩衝區這一切在一個字符串內存。這是相對較快的。

然後，當字符串完成後，將其輸出到HTML。

在您當前的代碼中，每次迭代都會強制執行圖形重排。每次迭代頁面必須重新計算整個頁面佈局。這花費了很多CPU週期。

function getBuffer(jsonData) { 
 
     var buffer = []; 
 
     for (i = 0; i < jsonData["outlet"].length; i++) { 
 
       buffer[i] = "<option value=" + jsonData["outlet"][i] + ">" + jsonData["outlet"][i] + "</option>"; 
 
      } 
 
     return buffer.join(''); 
 
    } 
 
    var jsonData = {outlet:["foo","bar","baz"]}; 
 
    for(flood = 3;flood<10000;flood++) { 
 
     jsonData.outlet[flood] = 'fooding '+flood; 
 
    } 
 
    var outlet = document.getElementById('outlet'); 
 
    outlet.innerHTML = getBuffer(jsonData);

<select id="outlet"></select>

來源

2016-03-03 09:01:23 Tschallacka

當使用新值循環2000個元素的數組時，瀏覽器更新元素需要很長時間

回答

相關問題