무한 스크롤로 아약스를 사용하여 성능을

Question

내 웹 사이트 인덱스에 무한 스크롤을 사용하고, 40 개체가있는 json을 얻기 위해 아약스 요청을 사용합니다. 그런 다음 자바 스크립트 루프를 사용하여 추가합니다. 그러나 얼마 동안은 약간 느려집니다.

그래서, 내 질문은 : 서버 쪽에서 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

자바 스크립트가 클라이언트 브라우저에서 실행되는, 그래서 속도가 클라이언트 컴퓨터의 연산 능력에 달려있다.

일반적으로 서버 쪽에서 html을 만들고 자바 스크립트를 추가하여 보낼 수 있도록 준비하는 것이 좋습니다.

EDIT : 서버에서 처리 할 수 ​​있으면 HTML을 생성하지만 마크 업 클라이언트 측 생성은 최근 인기가 높아지고 있습니다. 특히 모든 클라이언트 측 JavaScript 라이브러리가 출시되어 더 많이 사용됩니다.