Archivo para appendchild

Mejorar el rendimiento en la escritura DOM con javascript

Posted in Programación with tags , , , , , , on 15 febrero, 2010 by febrer

Uno de los principales problemas que nos encontramos al crear aplicaciones javascript, escribiendo directamente en el DOM (Document Object Model), es el mal rendimiento que este tiene cuando se realizan excesivas llamadas a AppendChild. Un claro ejemplo lo encontramos en los grids, ya que estos realizan abusivas llamadas en la creación de este (dependiendo, claro esta, del número de filas y columnas).

Una buena recomendación para acelerar este tipo de procesos, es la incorporación del elemento documentFragment en nuestros desarrollos.

Sin entrar en detalle de cómo implementar DocumentFragment en nuestros desarrollos, os muestro una tabla comparativa de ambos mecanismos con el tiempo en ms que tardan en realizar la escritura:

Browser Normal (ms) Fragment (ms)
Firefox 3.0.1 90 47
Safari 3.1.2 156 44
Opera 9.51 208 95
IE 6 401 140
IE 7 230 61
IE 8b1 120 40

Esta comparativa, junto con la manera de implementarlo en nuestros desarrollos, la encontraremos en el blog de John Resig:

http://ejohn.org/blog/dom-documentfragments

Más información sobre documentFragment:

http://therealcrisp.xs4all.nl/meuk/fragment.html

http://www.ryboe.com/2008/07/22/increasing-appendchild-performance-with-dom-tricks.html

http://www.slideshare.net/julien.lecomte/high-performance-ajax-applications

Anuncios