CPU'yu saklamaksızın büyük miktarlarda HTML nasıl eklenir

Question

Bir sayfaya veri yüklemek için daha çok ajax yaklaşımı deniyorum, çoğunlukla geri göndermeleri önlemek için. Bir ajax çağrısı üzerinden sunucu tarafından oluşturulmuş html'yi kolayca elde edebilirim ve dom'a eklemek jQuery'nin ya da .replaceWith'in yardımıyla yeterince basittir. Bu yöntemlerin her ikisi de krom/firefox'ta son derece hızlıdır, ancak çok yavaştır (7,8,9). Benim kod bloktan göreceksiniz

$.ajax(
{ 
    url: url, 
    dataType: 'html', 
    cache: false, 
    success: function (responseHtml) 
    { 
      //document.getElementById('targetElementId').outerHTML = responseHtml; 
      $('#targetElementId').replaceWith(responseHtml); 
    } 
}); 

, ben de olmayan bir jquery yaklaşım kullanmaya teşebbüs ettik. Her iki çizgi de, örn. Yani benim sorum, bir sayfaya büyük miktarlarda html eklemek için en iyi uygulama nedir, yani ezmeyin yani?

Answer 1

Yapabilirseniz, JSON'u tarayıcıya geri döndürmekten ve jQuery tmpl gibi bir şablon eklentisi kullanmaktan daha iyidir, çünkü tmpl, görüntülemek için HTML'ye eşlemeyi haritaya koyar; çünkü tmpl, daha yavaş tarayıcılarda performansı hızlandıran bazı harika önbelleğe alma işlemleri yapar. IE. Ayrıca JSON yanıt snappier yapar. Örnek:

<script id="template" type="text/x-jquery-tmpl"> 
    <span class="message">${text}</span> 
</script> 


<script type="text/javascript"> 
    $.ajax(
    { 
     url: url, 
     dataType: 'json', 
     cache: false, 
     success: function (data) 
     { 
      $("#targetElementId").html($("#template").tmpl(data)); 
     } 
    }); 
</script> 

JSON yanıtı bu şablonu eşleşti şekilde biçimlendirilmiş olması gerekir:

{ text: "Blah!" } 

Answer 2

Sen .text deneyebilirsiniz() veya .html().