¿Son los cromos "appendChild" realmente tan lentos?

Question

Tengo un marco que genera el DOM de una aplicación completamente usando document.createElement y document.appendChild. Ahora que la aplicación se hace cada vez más grande, noté que Chrome necesita mucho más tiempo para compilar el DOM que otros navegadores.

tanto, he creado la siguiente prueba de rendimiento:

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

} 

Los resultados de esta prueba son muy interesantes:

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

Chrome tardó más de 14 veces más en completarse que Opera. ¡Y eso no es solo un punto de referencia sin sentido! Realmente puedo sentir esta diferencia en mi aplicación.

¿Es normal que Chrome sea tan lento en las operaciones de DOM? ¿Hay alguna manera de acelerarlo?

Gracias!

Answer 1

Creo que esto es normal ....

Lo mismo ocurre con la manipulación de objetos HTML (ancho & altura & opacidad), especialmente si utiliza CSS3.

Programé una presentación de diapositivas (no usando jQuery, lo odio) que funciona sin problemas ... en FF, IE, Opera, Safari, ... pero no en Chomre. En Chrome es increíblemente lento (solo en versiones de Chrome más nuevas, en versiones antiguas como v12 era más rápido).

Answer 2

Actualización 2

Aquí es una especie hacker de solución, que puede valer la pena un poco de detección del navegador. Hace que el rendimiento en mis pruebas baje a menos de/de lo que era.

Puede display='none' el contenedor antes de agregarlo, luego muéstrelo de nuevo después. Puede obtener un poco de flash, pero eso es probablemente mejor que una larga demora.

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

Este es el tipo de aumento de rendimiento que yo habría esperado de la documentFragment.

---

actualización

Después de ejecutar una prueba de modified version@Esailija's jsFiddle para incluir el DocumentFragment, no parece hacer ninguna diferencia en Chrome (u Opera para el caso), por lo que parece que Chrome es simplemente más lento.

---

"¿Hay una manera de acelerarlo?"

que supongo que obtendrá un mejor rendimiento si se utiliza un documentFragment, y luego anexar al DOM con un solo .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

Su prueba aparece dañada. Si lo hace una prueba pura appendChild, Chrome sale muy por delante:

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