Firefox Jquery appendTo效率低下？

Question

我正在重新組合設計，我有一些JS可以生成大量（大約300個）div，對它們進行樣式設置，並將它們附加到body中。這在webkit瀏覽器中可以快速，完美地工作，但是當談到Firefox時，它就像地獄一樣慢。

我一直在想弄清爲什麼Firefox無法處理這個問題，我嘗試將所有div的html作爲字符串連接起來，然後將整個事件附加到body上，但事實證明這只是慢或者慢。

如果你想看到這個問題的活，我的網站是here

這裏的代碼的相關位：

get_bokeh返回的CSS樣式描述一個單一的「散景」一片的字符串。

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。您正在告訴瀏覽器在每次迭代中創建添加到昂貴的代碼。相反，將對象添加到數組中或將它們連接到一個字符串（便宜得多），然後再做一個附加。

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);