Czy chromes "appendChild" jest naprawdę wolny?

Question

Mam framework, który generuje DOM aplikacji całkowicie przy użyciu document.createElement i document.appendChild. Teraz, gdy aplikacja staje się coraz większa, zauważyłem, że Chrome potrzebuje znacznie dłużej, aby zbudować DOM jako inne przeglądarki.

Więc stworzyłem następujący test wydajności:

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

} 

Wyniki tego badania są bardzo ciekawe:

• Chrome 16: 700+
• Firefox 9: 560
• IE 9: 210
• Opera 11.60: 51

Chrome zajęło ponad 14 razy więcej czasu niż Opera. I to nie jest tylko bezsensowny punkt odniesienia! Naprawdę czuję tę różnicę w mojej aplikacji.

Czy to normalne, że Chrome działa tak wolno w operacjach DOM? Czy istnieje sposób na przyspieszenie?

Dzięki!

Answer 1

Myślę, że to normalne ....

To samo dotyczy manipulacji obiektami HTML (szerokość krycia & wysokość &), szczególnie jeśli używasz CSS3.

Zaprogramowałem pokaz slajdów (nie używając jQuery, nienawidzę go), który działa sprawnie ... w FF, IE, Opera, Safari, ... ale nie Chomre. W Chrome jest to niewiarygodnie powolne (tylko w nowszych wersjach Chrome, w starym jak wersja v12 było szybciej).

Answer 2

Aktualizacja 2

Oto hackish rodzaju rozwiązania, które mogą być warte trochę wykrywanie przeglądarki. Dzięki temu wydajność w moim testowaniu spadła do mniej niż 12,1 ////.

Możesz dodać kontener przed dodatkami, a następnie pokazać go ponownie. Możesz dostać trochę flasha, ale to chyba lepsze niż długie opóźnienie.

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

Jest to rodzaj wzrost wydajności że oczekiwałem od documentFragment.

---

Aktualizacja

Po uruchomieniu testu modified version z @Esailija's jsFiddle włączenie documentFragment, to nie wydaje się żadnej różnicy w Chrome (lub Opera dla tej sprawy), więc wygląda na to, że Chrome jest po prostu wolniejszy.

---

"Czy istnieje sposób, aby ją przyspieszyć?"

Zgaduję, że dostaniesz lepszą wydajność, jeśli używasz documentFragment, a następnie dołączyć do DOM z pojedynczym .appendChild.

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

Twój test wydaje się być wadliwy. Jeśli do czystego appendChild test, Chrome wychodzi droga naprzód:

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