Javascript 渲染代码需要花费大量时间

Question

我的 js/jq 代码有问题。我通过 $.get 以 json 格式下载数据，并尝试使用循环来显示数据。我的代码可以工作，但有时我的 json 数据有 300-400 条记录，而 redner 需要很多时间。我如何优化这个？

我的代码:

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

您可以将 native 浏览器工具与批量渲染结合使用。所以一开始实例化一个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);

当您创建新标签时，会将其附加到片段中。现在它还不会被渲染。继续附加，直到获得所需的所有内容，然后将片段附加到新标签应该在的位置。现在浏览器在一个周期内渲染所有内容。