Rendimiento de clientWidth en IE8

Tengo un javascript henetworkingado que congela el tfoot / thead de una tabla y permite que el cuerpo se desplace, funciona bien, excepto en IE8 es muy lento.

Rastreé el problema para leer la propiedad clientWidth de una celda en el tfoot / thead … en ie6 / 7 y FireFox 1.5-3 toma aproximadamente 3ms leer la propiedad clientWidth … en IE8 toma más de 200ms y más cuando la cantidad de celdas en la tabla aumenta.

Es esto un error conocido ? hay alguna solución o solución?

He resuelto este problema si todavía estás interesado. La solución es bastante compleja. Básicamente, debe conectar un HTC simple al elemento y almacenar en caching su clientWidth / Height.

El HTC simple se ve así:

<component lightweight="true"> <script> window.clientWidth2[uniqueID]=clientWidth; window.clientHeight2[uniqueID]=clientHeight; </script> </component> 

Debe adjuntar el HTC usando CSS:

 .my-table td {behavior: url(simple.htc);} 

¡Recuerde que solo necesita adjuntar el comportamiento para IE8!

A continuación, utiliza algo de JavaScript para crear getters para los valores en caching:

 var WIDTH = "clientWidth", HEIGHT = "clientHeight"; if (8 == document.documentMode) { window.clientWidth2 = {}; Object.defineProperty(Element.prototype, "clientWidth2", { get: function() { return window.clientWidth2[this.uniqueID] || this.clientWidth; } }); window.clientHeight2 = {}; Object.defineProperty(Element.prototype, "clientHeight2", { get: function() { return window.clientHeight2[this.uniqueID] || this.clientHeight; } }); WIDTH = "clientWidth2"; HEIGHT = "clientHeight2"; } 

Tenga en count que creé las constantes ANCHO / ALTURA. Debe usar estos para get el ancho / alto de sus elementos:

 var width = element[WIDTH]; 

Es complicado pero funciona. Tuve el mismo problema que tú, el acceso a clientWidth fue increíblemente lento. Esto resuelve el problema muy bien. Todavía no es tan rápido como IE7, pero ha vuelto a ser utilizable de nuevo.

No pude encontrar ninguna documentation que indique que se trata de un error conocido. Para mejorar el performance, ¿por qué no almacenar en caching la propiedad clientWidth y actualizar periódicamente el caching? IE si tu código fue:

 var someValue = someElement.clientWidth + somethingElse; 

Cambiar eso a:

 // Note the following 3 lines use prototype // To do this without prototype, create the function, // create a closure out of it, and have the function // repeatedly call itself using setTimeout() with a timeout of 1000 // milliseconds (or more/less depending on performance you need) var updateCache = function() { this. clientWidthCache = $('someElement').clientWidth; }; new PeriodicalExecuter(updateCache.bind(this),1); var someValue = this.clientWidthCache + somethingElse 

Su problema puede estar relacionado con otra cosa (y no solo con la llamada de cliente): ¿está actualizando / cambiando el tamaño de cualquier cantidad en su DOM mientras llama a esta function?

¿Su browser podría estar ocupado haciendo reflujo en IE8, haciendo que el ancho del cliente sea más lento?

IE 8 tiene la capacidad de cambiar entre las versiones de IE y también hay un modo de compatibilidad. ¿Has intentado cambiar al modo de compatibilidad? ¿Eso hace alguna diferencia?

Pensé que también noté un performance lento al leer las properties de ancho. Y puede ser que sea así.

Sin embargo, descubrí que el principal impacto para el performance de nuestra aplicación era que la function que se adjuntaba al evento de cambio de tamaño de la window provocaba de algún modo otro cambio de tamaño que causaba un efecto de cascada, aunque no un ciclo infinito. Me di count de esto cuando vi que el conteo de llamadas para la function era de órdenes de magnitud mayor en IE8 que en IE7 (me encanta IE Developer Tool). Creo que la razón es que algunas actividades en elementos, como establecer anchos de elemento quizás, ahora causan un reflujo en IE8 que no lo hizo en IE7.

Lo arreglé estableciendo el evento de cambio de tamaño de la window a: resize = "return myfunction ();" en lugar de simplemente resize = "myfunction ();" y asegurándose de que myfunction sea falso;

Me doy count de que la pregunta original tiene varios meses pero pensé que publicaría mis hallazgos en caso de que alguien más se beneficie.