Производительность с использованием ajax с бесконечной прокруткой

Я использую бесконечную прокрутку в индексе моего веб-сайта, и я использую запрос ajax, чтобы получить json с 40 объектами. Затем я добавляю их с помощью цикла javascript. Но какое-то время немного замедляется.

Итак, мой вопрос: генерирует блоки html на стороне сервера, и использование jquery append может быть более эффективным, чем получение массива json и зацикливание на нем.

Спасибо и извините за мой плохой английский

 $.ajax({
                url: oScroll.route,
                type: 'post',
                data: {current: $('.item').size(), 'type': type},
                //Succès de la requête
                success: function(oData) {
                    if (oData.status == "success") {
                        oScroll.getHtml(oData);
                        oScroll.load = false;
                    } else {
//                        $('#my-special-modal').hide();
                        oScroll.load = false;
                    }
                }
            });

  getHtml: function(oData) {
        var items = [];
        for (var index in oData.results) {
            var item = oData.results[index];
            var html;
            html = '<article class="item opinion" >';
            html += '<div class="header-opinion">';
            html += '<div class="picto-cat"></div>';
            html += '<div class="name-cat">';
            html += item.shop_name;
            html += '<br />';
            html += '<div class="cat">';
            html += item.category_name;
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '<div class="average-stars">';
            html += '<p>';
            html += Number(item.opinion_avg).toFixed(1) + ' - ' + item.opinion_count + ' avis';
            html += '</p>';
            html += '</div>';
            html += '<div>';
            html += '<a href="'+Routing.generate('fo_shop_show', {iId:item.shop_id})+'"><img src="/images/shops/boxes/' + item.shop_image + '" /></a>';
            html += '</div>';
            html += '<div class="place">';
            html += item.shop_city;
            html += '</div>';
            html += '<div class="row  status-user">';
            if (item.opinion_message == 'islike') {
                html += item.user_firstname + ' ' + item.user_lastname[0] + '. a aimé ';
            } else {
                html += item.user_firstname + ' ' + item.user_lastname[0] + '. a noté ' + Number(item.opinion_rating / 2).toFixed(1);
                html += '</div>';
                html += '<div class="row message-user">';
                if (item.opinion_message.length > 217) {
                    html += item.opinion_message.substr(0, 217) + '...';
                } else {
                    html += item.opinion_message;
                }
                html += '</div>';
            }
            html += '<div class="footer-opinion">';
                html += '<div class="picto-user"><img src="images/user/avatars/'+item.user_avatar+'" /></div>';
                html += '<div class="message-date">';
                html += '<time><p><img src="/images/pictos_actions/clock.png"/>';
                html += item.opinion_date+'</p></time>';
                html += '</div>';
                html += '<div class="picto-action"></div>';
            html += '</div>';
            html += '</article>';
            items.push(html);
        }
        var $newElems = $(items.join(''));
        container.append($newElems);
        $newElems.css({opacity: 0});
        $newElems.imagesLoaded(function() {
            // show elems now they're ready
            $newElems.css({opacity: 1});
            container.masonry('appended', $newElems, true);
        });
    }