Kromlar "appendChild" gerçekten bu kadar yavaş mı?

Question

Tamamen document.createElement ve document.appendChild kullanarak bir uygulamanın DOM'ı üreten bir çerçevem ​​var. Artık Uygulama büyüdükçe ve büyüdükçe, Chrome'un DOM'ı diğer Tarayıcılar olarak oluşturmak için önemli ölçüde daha uzun sürmesi gerektiğini fark ettim. Firefox 9 700 +

: 560

window.onload = function(){ 
    var now = new Date().getTime(); 
    for(var i = 0; i < 10000; i++){ 
     document.body.appendChild(document.createElement("div")); 
    } 
    setTimeout(function(){ 
     console.log(new Date().getTime() - now); 
    },0); 

} 

bu testin sonuçlarına çok ilginç:

• Krom 16

  Yani, aşağıdaki performans testini yarattı IE 9: 210

• Opera 11.60: 51

Chrome, Opera'dan tamamlamak için 14 kattan fazla zaman aldı. Ve bu sadece anlamsız bir kriter değil! Uygulamamdaki bu farkı gerçekten hissedebiliyorum.

Chrome'un DOM işlemlerinde bu kadar yavaş olması normal midir? Hızlandırmak için bir yol var mı?

Teşekkürler!

Answer 1

bu normal olduğunu düşünüyorum ....

Aynı şey, özellikle de CSS3 kullanıyorsanız, HTML Nesneleri için (genişlik & yükseklik & opaklık) gider.

FF, IE, Opera, Safari'de ... ama Chomre'de sorunsuz bir şekilde çalışan bir Slideshow (jQuery kullanmadan, nefret etmiyorum) programlıyorum. Chrome'da inanılmaz yavaş (yalnızca daha yeni Chrome Sürümlerinde, eski gibi v12'de daha hızlıydı).

Answer 2

Güncelleme 2

İşte biraz tarayıcı algılama değebilir çözümün bir hackish tür bu. Testlerimde performansın ne olduğunu /'dan daha düşük bir değere getiriyor.

Ekler önce kapsayıcısını display='none' yapabilirsiniz, sonra tekrar gösterebilirsiniz. Biraz flaş alabilirsiniz, ancak bu muhtemelen uzun bir gecikmeden daha iyidir.

window.onload = function(){ 

    var content = String.fromCharCode(Math.floor(Math.random() * 1000)); 

     // cache it in case it is already set 
    var disp = document.body.style.display; 

    document.body.style.display = 'none'; 

    var now = new Date().getTime(); 

    for(var i = 0; i < 10000; i++){ 
     document.body.appendChild(document.createElement("div")) 
      .appendChild(document.createTextNode(content)); 
    } 

    setTimeout(function(){ 
     console.log(new Date().getTime() - now); 
     document.body.style.display = disp || ''; // restore it 
    },0); 
}; 

Bu

ben documentFragment umuyordum performans artışı tür.

---

documentFragment dahil etmek için bir modified version@Esailija's ait jsFiddle testini çalıştırdıktan sonra, Chrome'da herhangi bir fark yaratmak gibi (ya da Opera bu konuda) gelmez

Update, Bu yüzden Chrome'un daha yavaş olduğu anlaşılıyor.

---

"it hızlandırmak için bir yol var mı?"

Ben size bir documentFragment kullanırsanız daha iyi performans elde ediyor ve daha sonra tek .appendChild ile DOM şekilde ekleyecek olduğunu tahmin ediyorum.

window.onload = function(){ 
    var now = new Date().getTime(); 

     // create a documentFragment 
    var frag = document.createDocumentFragment(); 

    for(var i = 0; i < 10000; i++){ 
     frag.appendChild(Div()); // append to the documentFragment 
    } 

     // append the documentFragment (which is emptied) 
    document.body.appendChild(frag); 

    setTimeout(function(){ 
     console.log(new Date().getTime() - now); 
    },0); 

    function Div(){ 
     var This = document.createElement("div"); 
     return This; 
    } 
} 

Answer 3

Testiniz hatalı görünüyor. Saf bir appendChild testi yaparsanız, Krom çok önde çıkıyor:

http://jsperf.com/appendchild-from-so