使用无限滚动AJAX的性能

我在我的网站索引中使用无限滚动，并且我使用AJAX请求来获取具有40个对象的JSON。然后我使用JavaScript循环添加它们。但有一段时间，它稍微减慢一点。使用无限滚动AJAX的性能

所以，我的问题是：是在服务器端生成html块，并使用jQuery的附加更有效比得到一个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); 
     }); 
    }

来源

2014-01-22 tannana

我不明白你的问题你使用MVC应用程序 – Dinesh

是的，我使用symfony2。我使用ajax来加载一个json数组（包含40个json对象）。然后我循环创建html div。最后，我把HTML放在页面中。但它可能会很慢。所以即时通讯问是否更有效地创建并从服务器返回HTML。然后将其附加到页面 – tannana

我编辑了我的帖子。谢谢。 – tannana

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

一般来说，最好在服务器端创建html，并将它发送给准备添加的javascript。

编辑：如果你的服务器可以处理它，然后在那里生成HTML，但生成标记客户端最近越来越流行，尤其是所有客户端JavaScript库出来，并越来越多地使用。

来源

2014-02-13 21:35:41

使用无限滚动AJAX的性能

回答

相关问题