使用带有无限滚动的 ajax 的性能答案

【问题标题】：Performance using ajax with an infinite scroll使用带有无限滚动的 ajax 的性能
【发布时间】：2014-01-22 12:05:41
【问题描述】：

我在我的网站索引中使用无限滚动，并且我使用 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);
        });
    }

【问题讨论】：

我无法理解您的问题，您是否使用 MVC 应用程序
是的，我正在使用 symfony2。我使用 ajax 加载一个 json 数组（包含 40 个 json 对象）。然后我循环它以创建 html div。最后，我将 html 放在页面中。但它可能很慢。所以我问从服务器创建和返回html是否更有效。然后将其附加到页面中
我编辑了我的帖子。谢谢。

标签： javascript php jquery ajax performance

【解决方案1】：

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

一般来说，最好在服务器端创建 html，然后发送 javascript 以供附加。

编辑：如果你的服务器可以处理它，那么就在那里生成 HTML，但是生成标记客户端最近变得很流行，尤其是所有客户端 javascript 库都出来了，并且越来越多地使用。

【讨论】：