2010-11-30 14 views
11

El diseño y la representación de contenido HTML puede llevar algo de tiempo si el HTML es lo suficientemente complejo. No pude encontrar un conjunto de mejores prácticas sobre cómo codificar HTML para ayudar al motor de diseño (especialmente en IE) para que los redibujados de página sean más rápidos. ¿Existe tal conjunto de mejores prácticas?Cómo codificar HTML para una representación rápida en IE

Mi problema específico actual es que mis datos tabulares (en un elemento de la tabla) hacen que dibujar la página sea demasiado lento y que las actualizaciones DOM (efectos de desplazamiento) y las animaciones sean muy lentas. Estoy seguro de que no es el rendimiento de JavaScript. Revisé la página usando DynaTrace AJAX. La CPU se vuelve demasiado ocupada cuando coloco el mouse sobre los elementos, pero no hay JS ejecutándose. Y el vuelo estacionario se realiza agregando/eliminando una clase a elementos TR. También probé YSlow en Firefox, no muestra ningún problema en particular. Tampoco está relacionado con la red. (Firefox establece la página más rápido, pero no es porque su motor JS sea más rápido)

¿Hay alguna herramienta para perfilar el diseño y el diseño en IE, para poder averiguar de dónde viene el problema? ¿Y qué puede causar que el dibujo sea tan lento, para poder evitarlos en el código HTML?

+3

La mejor forma de acelerar el procesamiento es escribir menos código. –

+0

Usted no está usando expresiones CSS, ¿verdad? Esos son JS en CSS y tienden a consumir toda la potencia de CPU disponible. – Piskvor

+0

No, supongo que mi CSS es simplemente CSS. – Iravanchi

Respuesta

17

Internet Explorer es lento en renderizar tablas HTML grandes.

se refieren a este buen artículo en MSDN: Building High Performance HTML Pages y específicamente a la sección acerca de las tablas:

  • Poner la mesa-diseño atributo CSS para fijo en la mesa.
  • Defina explícitamente los objetos col para cada columna.
  • Establezca el atributo ANCHURA en cada columna.

Luego también hay un buen blog sobre el IEBlog sobre la mesa de renderizado: Table Rendering.

Todo se reduce a esto: intente que el contenido de las tablas sea menos complejo, es decir, establezca un ancho fijo y no tenga demasiada acción de renderizado dinámico. IE primero carga el contenido y luego tiene que calcular el ancho correcto para los contenidos == lento.

+0

Más o menos lo que iba a decir, excepto que tiene referencias para respaldarlo. +1 – Quentin

+0

Gracias por los enlaces. Estoy intentando esos ahora. Lo que he descubierto hasta ahora es que si elimino un "ancho = 100%", todo va mucho más rápido, ¡pero el diseño fijo de la tabla realmente lo ralentizó! Creo que debería haber alguna herramienta disponible (¡o desarrollada!) Que ayude a identificar los cuellos de botella en el diseño. ¿Conoce alguna? – Iravanchi

+0

Usted ya ha declarado dynaTrace edición AJAX - No conozco ninguna herramienta que muestre tanto en profundidad lo que está sucediendo realmente bajo el capó de IE, por lo que no tiene mucha suerte para descubrir realmente qué es lo loco responsable de tu retraso Debería seguir con su observación de 'ancho = 100%' y probar algunas variaciones de eso. ¿Tal vez pruebe su tabla sin el resto de marcas en su página? Tal vez el problema yazca en otro lado. –

Cuestiones relacionadas