La modificación de la propiedad 'className' es extremadamente lenta en IE7

Question

En mi sitio web, modifico dinámicamente la propiedad javascript 'className' de un DIV. Sin embargo, esta es una operación extremadamente costosa, ya que el DIV contiene muchos nodos secundarios. A veces toma hasta 1,5 segundos.

¿Hay alguna forma de acelerar esta operación? ¿Te gusta, ocultar el contenido, realizar la operación y luego mostrar el contenido otra vez?

Actualización:

Alguna información adicional.

El código real:

$("#myDiv").tabs(); 

Se encuentra witin el manejador ready(). Ver http://jqueryui.com/demos/tabs/

Esta es la llamada costosa. Lo seguí hasta la propiedad className, que consume todo ese tiempo de procesamiento.

El DIV contiene una gran cuadrícula de datos de SharePoint, vea http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spview.renderashtml.aspx El código se ejecuta en Sharepoint, probado en WinXP + IE7.

Así que me pregunto si podemos deshabilitar el diseño refrescante mientras manipulamos el DOM o algo así. ¿Hay algún truco?

Answer 1

Intente asegurarse de que los selectores de CSS que afectan a los elementos contenidos en el contenedor cuyo nombre de clase está cambiando solo usan la clase contenedora cuando realmente tienen que hacerlo. Obviamente, cuando maneja el diseño con la clase de contenedor, probablemente haya muchas cosas afectadas, pero a veces es fácil caer en div.whatever td.currency cuando realmente todo lo que necesita es td.currency (solo un ejemplo inventado).

El motor de diseño de IE es realmente rápido para algunas cosas, pero he descubierto que el uso intensivo de este tipo de técnica de diseño (que es, en mi opinión, una muy buena práctica en general) puede afectar mucho al navegador. Afortunadamente, IE8 es mucho mejor en este tipo de cosas.

Answer 2

Logré ~ 50% de mejora en el rendimiento al cambiar de pestaña al quitar las dos pestañas para cambiar de su matriz antes de cambiar la propiedad className. Para detalles de implementación, vea https://developers.google.com/speed/articles/javascript-dom