Performance de manipulación del DOM con Javascript en Internet Explorer

Hoy pasé la última parte de la tarde y comienzo de la noche luchando con un problema de performance al manipular el DOM de html con Javascript en Internet Explorer.

Resulta que en el trabajo tenemos una tabla que hubo que partir en dos para agregarle scroll horizontal a partir de cierta columna. Para hacer esto, lo que se hizo fue partir dinámicamente la tabla en dos (o sea, se construyó una tabla con las columnas 1 a j y otra con las columnas j+1 a n, siendo n la cantidad de columnas y j el número de columna de corte).

El problema surgió cuando la tabla de la izquierda tenía filas con distinta altura que la tabla de la derecha. Se hizo un arreglo que consistía en recorrer las filas de las dos tablas comparando las altura (row.height) y corrigiendo cuando eran diferentes. Ahí comenzamos a tener problemas de performance, porque la tabla puede tener hasta 600 filas. En el Firefox no teníamos problemas porque se las ingenia para hacer esto bien, pero en Internet Explorer tardaba una eternidad.

Da la impresión de que Internet Explorer quiere redibujar enseguida la tabla apenas le cambiamos la altura a una fila (imagínense lo que tarda redibujando la tabla de 600 filas unas 600 veces).

Me partí el bocho buscando maneras de mejorarle la performance a esto. Gasté un montón de tiempo intentando implenetar la solución que proponen en esta página (a pesar de que es muy sucia), pero no sólo no mejoró los tiempos, sino que los empeoró levemente.

Ya me estaba por rendir a la frustración cuando se me ocurrió probar qué pasaba si ocultaba todo antes de hacer los ajustes y lo volvía a mostrar después (seteando el style.display = 'none' y luego volviéndolo a setear en style.display = 'inline'). Mi razonamiento fue "a lo mejor si está oculto no intenta redibujar nada" ¡y tuve suerte!

Este simple y miserable cambio hizo que el ajuste de cada fila pasara de tomar unos 70 milisegundos a tomar sólo 2!! Al parecer, con esto se logra que el browser difiera el redibujado de los componentes hasta el momento en que se muestran realmente.

Me quedé muy contento y por eso lo comparto. A lo mejor es algo super conocido, pero no logré que Google me encontrara ningún tip relacionado con esto.


¡Espero que a alguien más le sirva!