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