處理大量數據的jQuery

Question

我有一個包含了年，月，國家和城市組合框數據過濾器。所有組合框的項目有一個選擇所有（所有年份，所有月份，所有國家和所有城市）。

當我選擇一個過濾器，我將數據發送到服務器和我得到的數據JSON對象，這是由JQuery的處理。

的問題就來了，如果你選擇的所有數據 - 服務器將返回一個JSON對象有三萬記錄（及以上）和瀏覽器，包括動畫演出（裝載機），凍結和一切花費的時間太長。

這是數據過濾器的HTML（有些選擇是通過AJAX填寫）

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h3 class="panel-title" data-label="Filter data"></h3> 
    </div> 
    <div class="panel-body"> 
     <div class="row"> 
      <div class="col-md-3" data-label="Year"></div> 
      <div class="col-md-3" data-label="Month"></div> 
      <div class="col-md-3" data-label="Country"></div> 
      <div class="col-md-3" data-label="City"></div> 
     </div> 

     <div class="row"> 
      <div class="col-md-3"> 
       <select id="cmbYear"> 
        <option value="0" data-label="All years"></option> 
       </select> 
      </div> 
      <div class="col-md-3"> 
       <select id="cmbMonth"> 
        <option value="0" data-label="All year"></option> 
        <option value="1" data-label="January"></option> 
        <option value="2" data-label="February"></option> 
        <option value="3" data-label="March"></option> 
        <option value="4" data-label="April"></option> 
        <option value="5" data-label="May"></option> 
        <option value="6" data-label="June"></option> 
        <option value="7" data-label="July"></option> 
        <option value="8" data-label="August"></option> 
        <option value="9" data-label="September"></option> 
        <option value="10" data-label="October"></option> 
        <option value="11" data-label="November"></option> 
        <option value="12" data-label="December"></option> 
       </select> 
      </div> 
      <div class="col-md-3"> 
       <select id="cmbCountry"> 
    <option value="0" data-label="All countries"></option> 
      </select> 
     </div> 
     <div class="col-md-3"> 
      <select id="cmbCity"> 
       <option value="0" data-label="All cities"></option> 
      </select> 
     </div> 
    </div> 
    <br/> 
    <div class="row"> 
     <div class="col-md-12"> 
      <button id="btnFilterData" data-label="Filter data" class="btn btn-primary btn-lg pull-right"></button> 
     </div> 
    </div> 
</div> 

這是一個jQuery腳本：

$(document).ready(function() { 
    $('#btnFilterData').click(function() { 
     GetFilteredData(); 
    }); 
}); 

function GetFilteredData() { 
    $.ajax({ 
     url: 'some-file.php', 
     data: { 
      year: $('#cmbYear').val(), 
      month: $('#cmbMonth').val(), 
      countryid: $('#cmbCountry').val(), 
      cityid: $('#cmbCity').val() 
     }, 
     type: 'post', 
     async: true, 
     success: function (data) { 
      if (data.IsError) { 
       ShowErrorDialog(data.Error); 
      } 
      else { 
       $('#tableRawData').find('tr:gt(0)').remove(); 
       if (data.Data != null) { 


      for (var i = 0; i < Object.keys(data.Data).length; i++) { 
        var obj = data.Data[i]; 

        var newRow = '<tr><td>' + obj.Date+ '</td><td>' + obj.Country + '</td><td>' + obj.City + '</td><td>' + obj.Loan+ '</td><td>' + obj.Paid+ '</td><td>' + obj.Remains+ '</td><td data-label="' + obj.Note + '"></td></tr>'; 
        $('#tableRawData').append(newRow); 
       } 
      } 
     } 
    }, 
    complete: function() { 
     HideWaitDialog(); 
    } 
}); 

什麼辦法如何使處理更快還是更有效？在理想的情況下，不凍結瀏覽器和動畫加載器...

Answer 1

我讀過你的代碼，我同意分頁上的評論，但是，如果你真的想保持這些東西，他們在這裏的方式是一些優化我找到

• 您在每次迭代時都調用$('#tableRawData')，但這在每次迭代時都會相同。你在這裏浪費計算能力。你應該在循環開始時將它放入一個變量中。通過這樣做，你將提高你的代碼的性能15％
• append是一個涉及DOM操作的複雜函數，你不應該儘可能少地使用它。一個小竅門是積累你的HTML中的字符串，並呼籲追加在循環的結束。通過這樣做，你將會是快12倍比我以前的解決方案
• jQuery附加解析你的字符串並分解它做DOM元素並將它們附加到DOM樹。這種操作成本很高。你可以做的是作爲瀏覽器來解析字符串並追加它。這將是更快，因爲它是天然的和高度優化的代碼，並會有的jQuery，JavaScript和DOM樹之間沒有相互作用。如果你這樣做會比我以前的解決方案快1.7倍

我把代碼片段在jsperf這樣你就可以在你的操作系統和瀏覽器上測試它：http://jsperf.com/creating-a-large-table-with-jquery

所有測試爲10000行。

應用在我的瀏覽器的所有優化使代碼26X快比你

作爲一個有趣的結論：在回答你的問題：

處理大量數據的jQuery

是：

不要使用jQuery;）