使用ajax进行无限滚动的性能

Question

Im using an infinite scroll in my website index, and i use ajax request to get a json with 40 objects. Then i add them using a javascript loop. But some time, it slows a little bit.

So, my question is : Is generating html blocks on server side and using jquery append is more can be more efficient than getting a json array and looping on it.

Thank you and sorry for my bad english

 $.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);
        });
    }

Answer 1

Javascript runs in the client browser, so it's speed depends on the client machine's computational power.

Generally it is better creating the html on the server side, and sending it the javascript ready for appending.

EDIT: If your server can handle it, then generate the HTML there, but generating the markup client side is getting popular recently, especially with all the client side javascript libraries coming out, and becoming more used.