Firefox Jquery appendTo非効率？

Question

私はポートフォリオの再設計に取り組んでいます。私は、div（div）の数が多い（約300個）生成し、それらにスタイルを付け、それらをボディに追加するJSのビットを持っています。これはWebkitブラウザですばやく完璧に動作しますが、Firefoxに関しては地獄のように遅いです。

Firefoxがこれを処理できない理由を理解しようとしていて、すべてのdivのHTMLを文字列として連結し、その全体を本文に追加しようとしましたが、これは遅くても遅い。

あなたはライブの問題を見たい場合は、私のサイトはhere

であるここでは、コードの関連ビットです：

シングル「ボケ」作品を記述するCSSスタイルの文字列を返しますget_bokeh。

function generate(){ 

      $("#bokeh_container").remove(); 
      if (q==0){ 
       min = 30, 
       max = 30, 
       bokeh_count = 1; 
      } 
      else if (q==1){ 
       min = 7, 
       max = 10, 
       bokeh_count = 300; 
      } 
      else if (q==2){ 
       min = 7, 
       max = 15, 
       bokeh_count = 300; 
      } 
      else if (q==3){ 
       min = 8, 
       max = 11, 
       bokeh_count = 500; 
      } 

      sum = min+max; 

      window_width = $(document).width(); 

      window_height = $(window).height(); 

      colorful = $("#colorful").attr("checked"); 

      var container = $("<div />",{"id":"bokeh_container","style":"width:100%; height:100%; position:absolute; left:50%; margin-left:-600px; top:0px; z-index:1; display:none; "}); 

      for(var i=0;i<bokeh_count;i++){ 

       $("<div />",{"class":"bokeh","style":get_bokeh()}).appendTo(container); 

      } 

      container.appendTo("body").show(); 

Answer 1

このjsperfテストを確認してください：http://jsperf.com/test-of-jquery-appendto

HTMLを文字列に組み込んだ後、DOMに追加すると、ChromeとFirefoxでは2-3倍、IE8では5倍高速に表示されます。これはあなたがやっていることの完璧なシミュレーションではありませんが、おそらく見る価値があります。

Answer 2

あなたのコードは、FFよりもChromeよりもはるかに遅くありません。

See and run this performance test of it。

また、標準を実行したい場合もあります：Firefoxをシャットダウンし、Ccleanerを実行し、FFダンスを再開します。

Answer 3

なぜインラインスタイルの代わりにCSSクラスを使用しないのですか？私はコンテナのために設定されたスタイル属性の束と、ループ内のdivのためにさえも持っているのを見る。これらのスタイルをクラスに設定し、代わりにクラスを使用すると、jqueryは要素を作成する際にすべてのプロパティを反復処理する必要がないため、パフォーマンスが向上します。

Answer 4

forループの.appendToを削除する必要があります。あなたはブラウザに、高価な繰り返しごとにdomへの追加を作成するように指示しています。その代わりにオブジェクトを配列に追加するか、文字列に連結して（もっと安価な）文字列を連結してから、後で単一の文字列を追加します。

var html = ''; 
for(var i=0;i<bokeh_count;i++){ 
    html += '<div class="bokeh" style="'+ get_bokeh()+ '"></div>'; 
} 
var container = $("<div />",{"id":"bokeh_container","style":"width:100%; height:100%; position:absolute; left:50%; margin-left:-600px; top:0px; z-index:1; display:none; "}).html(html); 
$('body').append(container);