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

Question

我在网站索引中使用了无限滚动，并且我使用了ajax请求来获取包含40个对象的json。 然后，我使用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);
        });
    }

Answer 1

Javascript在客户端浏览器中运行，因此它的速度取决于客户端计算机的计算能力。

通常，最好在服务器端创建html，然后将其发送给javascript以进行附加。

编辑：如果您的服务器可以处理它，则在那里生成HTML，但是生成标记客户端最近变得越来越流行，尤其是随着所有客户端javascript库问世，并且越来越被使用。