Javascriptレンダリングコードに多くの時間がかかる

Question

私のjs/jqコードに問題があります。 jsonで$ .getを使ってデータをダウンロードし、ループを使ってデータを表示しようとしています。私のコードは動作しますが、私のjsonデータは300〜400レコードあり、rednerはかなりの時間がかかります。 私はこれをどのようにoptymalizedすることができますか？

私のコードは：

var selectData = ''; 
var selectHtml = ''; 
var krzeselkaArray = []; 

$(document).ready(function(){ 
    DownloadData(<?= h($q->id_kontrahent) ?>); 
}); 

function turnOffLoader(){ 
    $('.loader').remove(); 
} 

function DownloadData(oid){ 
    $.get("<?= $this->Url->build(['controller'=>'json','action'=>'KontrahenciKonfiguruj'],true)?>/"+oid, function(r){ 


     selectData = r.select; 

     selectHtml = $('<select>'); 
     for(var x = 0, len = Object.keys(r.select).length; x < len ; x++){ 
      var obj = r.select[x]; 
      selectHtml.append($('<option>').val(obj.Tkaniny.id_tkaniny).text(obj.Tkaniny.nazwa)); 
     } 


     for(var x = 0, len = Object.keys(r.konfiguracja.data).length; x < len; x++){ 
      var obj = r.konfiguracja.data[x]; 
      var obj_y = $('.konfiguratorHeaderTable').find('td[data-krzeselkoid="'+obj.id_krzesla+'"]').index(); 

      var konf_cache = $('.zaawansowana_edycja').find('tbody').find('tr.konfiguratorAttr[key="'+obj.TKA1.id_tkaniny+'|'+obj.TKA2.id_tkaniny+'"]'); 

      if(konf_cache.length == 0){ 
       var newHtml = $('<tr>'); 
       newHtml.addClass('konfiguratorAttr').attr('key',obj.TKA1.id_tkaniny+'|'+obj.TKA2.id_tkaniny); 

       for(var t1=0;t1 < $('.konfiguratorHeaderTable').find('.obr').find('td').length; t1++){ 
        newHtml.append('<td>'); 
       } 

       $('.zaawansowana_edycja').find('tbody').append(newHtml); 
      } 

      konf_cache.find('td:first').html('<div class="col-sm-12"><select>'+selectHtml.html()+'</select></div><div class="col-sm-12"><select>'+selectHtml.html()+'</select></div>'); 

      var h2 = $('<div>'); 
      h2.addClass('col-sm-12'); 
      h2.append($('<input>').attr('type','text')); 
      h2.append($('<input>').attr('type','text')); 
      h2.append($('<input>').attr('type','text')); 
      h2.append($('<input>').attr('type','text')); 
      h2.append($('<input>').attr('type','text')); 
      h2.append($('<input>').attr('type','text')); 
      h2.append($('<input>').attr('type','text')); 
      h2.append($('<input>').attr('type','text')); 
      h2.append($('<input>').attr('type','text')); 
      h2.append($('<input>').attr('type','text')); 
      h2.append($('<input>').attr('type','text')); 
      h2.append($('<input>').attr('type','text')); 
      h2.append($('<input>').attr('type','text')); 
      konf_cache.find('td').eq(obj_y).append(h2.html()); 




     } 




     if(r){ 
      turnOffLoader(); 
     } 

    },'json') 
} 

また、私のコードは、それぞれのTDで10回の入力が含まれているテーブルを生成します。

Answer 1

バッチレンダリングと組み合わせたネイティブブラウザツールを使用できます。だから、冒頭にはdocument fragment

var element = document.getElementById('ul'); // assuming ul exists 
var fragment = document.createDocumentFragment(); 
var browsers = ['Firefox', 'Chrome', 'Opera', 
    'Safari', 'Internet Explorer']; 

browsers.forEach(function(browser) { 
    var li = document.createElement('li'); 
    li.textContent = browser; 
    fragment.appendChild(li); 
}); 

element.appendChild(fragment); 

インスタンス化し、新しいタグを作成するときにフラグメントに追加します。今はまだレンダリングされません。あなたが必要なものをすべて手に入れてから、追加するタグを追加する必要があります。これでブラウザはすべて1サイクルでレンダリングされます。

Answer 2

あなたはあなたのコードの多くを最適化することができます。

h2.append($('<input>').attr('type','text')); 

build this before the for loop : 
var input_html=''; 
for(var i=0;i<your_number_of_input;i++) 
    input_html+='<input type="text">'; 

やPHPでそれを構築します。 （できればクラスの代わりに、とidを使用）終わり はjqueryのオブジェが、直接あなたの構築HTML

konf_cache.find('td').eq(obj_y).append(HTML_VAR_HERE); 

を追加し、可能な場合は、あなたのjqueryのセレクタをキャッシュしません。

Answer 3

まず、dzieńdobry、 私はスレッドがブロックされないように匿名関数内でループロジックを実行する方が簡単だと思います。

var tbody = $('.zaawansowana_edycja').find('tbody'); 
for (var x = 0, len = Object.keys(r.konfiguracja.data).length; x < len; x++) { 
    (function(idx) { 
     var obj = r.konfiguracja.data[idx]; 
     var obj_y = $('.konfiguratorHeaderTable').find('td[data-krzeselkoid="' + obj.id_krzesla + '"]').index(); 
     var konf_cache = tbody.find('tr.konfiguratorAttr[key="' + obj.TKA1.id_tkaniny + '|' + obj.TKA2.id_tkaniny + '"]'); 

    if (!konf_cache.length) { 
     var newHtml = $('<tr>'); 
     newHtml.addClass('konfiguratorAttr').attr('key', obj.TKA1.id_tkaniny + '|' + obj.TKA2.id_tkaniny); 

     for (var t1 = 0; t1 < $('.konfiguratorHeaderTable').find('.obr').find('td').length; t1++) { 
      newHtml.append('<td>'); 
     } 

     tbody.append(newHtml); 
    } 

    konf_cache.find('td:first').html('<div class="col-sm-12"><select>' + selectHtml.html() + '</select></div><div class="col-sm-12"><select>' + selectHtml.html() + '</select></div>'); 

    var h2 = $('<div>'); 
    h2.addClass('col-sm-12'); 
    h2.append($('<input>').attr('type', 'text')); 
    h2.append($('<input>').attr('type', 'text')); 
    h2.append($('<input>').attr('type', 'text')); 
    h2.append($('<input>').attr('type', 'text')); 
    h2.append($('<input>').attr('type', 'text')); 
    h2.append($('<input>').attr('type', 'text')); 
    h2.append($('<input>').attr('type', 'text')); 
    h2.append($('<input>').attr('type', 'text')); 
    h2.append($('<input>').attr('type', 'text')); 
    h2.append($('<input>').attr('type', 'text')); 
    h2.append($('<input>').attr('type', 'text')); 
    h2.append($('<input>').attr('type', 'text')); 
    h2.append($('<input>').attr('type', 'text')); 
    konf_cache.find('td').eq(obj_y).append(h2.html()); 

})(x); 
}