ページをぶら下げるページjqueryを避ける方法

Question

$.each(dataresp, function(key,val){ 
     cnt=cnt+1; 
     var idval=cnt+"_content"; 
     var str = '<div id="'+idval+'"></div>' 
     $(".Container").append(str); 
     myProcessMethod(idval);// in this method I used to fill the above div with content 
    }); 


when there is too much data , html page is not showing . browser page got freeze until the loop finishes. 

ループを完了した後、一度ページを見ることができます。 フリーズする方法。すなわち、 1つ1つ完成したらブラウザページにデータが表示されます。

Answer 1

ドキュメントフラグメントを作成し、そこに要素を追加して、そのフラグメントをDOMに追加することができます。

var docFrag = document.createDocumentFragment(); 

$.each(dataresp, function(key,val){ 
     cnt=cnt+1; 
     var idval=cnt+"_content"; 
     var d = document.createElement('div'); 
     d.id = idval; 
     docFrag.appendChild(d); 
     myProcessMethod(idval);// in this method I used to fill the above div with content 
    }); 

$(".Container").append(docFrag) 

Answer 2

$.each(dataresp, function(key,val){ 
     _.defer(function(){ 
      cnt=cnt+1; 
      var idval=cnt+"_content"; 
      var str = '<div id="'+idval+'"></div>' 
      $(".Container").append(str); 
      myProcessMethod(idval); 
     }); 
    }) 

延期は、アンダースコアの機能、setTimeout(fn,0)、 フロントエンドJSのちょうどaliaseで、すべての重い機能が延期として実行する必要があります。