1. Inicio
  2. Pregunta y respuesta
  3. Demasiados elementos DOM

Demasiados elementos DOM

2011-05-16 35 views
5

Estoy creando una aplicación web de una página y está empezando a ser bastante grande. La aplicación tiene varios componentes, cada uno meticulosamente diseñado. En promedio, la aplicación tiene un recuento de elementos DOM de 1200+. Mi exploración YSlow me advirtió que esto es demasiado y que no debería tener más de 700 elementos DOM.Demasiados elementos DOM

Normalmente soy bastante estricto y eficiente con mi marcado y dudo que pueda recortar mucho. Tiendo a usar muchos elementos DOM para obtener el estilo exactamente correcto y trabajar en el navegador cruzado.

¿Cómo puedo reducir drásticamente la cantidad de elementos DOM? ¿Tendré que cargar más contenido a pedido (ajax) en lugar de todo en la carga de la página? ¿Una gran cantidad de elementos DOM tiene un gran impacto en el rendimiento?

me gustaría escuchar la experiencia de las personas con esta y cualquier solución que pueda tener ...

Fuente

2011-05-16 wilsonpage

+1

Si puede proporcionar algún ejemplo de HTML y/o Javascript, es posible que podamos recomendar cómo puede condensarlo. –

+0

Supongo que la mejor pregunta es por qué necesita todo eso en una página al mismo tiempo.¿Podrías hacer paginación o algo así? –

+0

¿De qué navegadores estamos hablando aquí? –

Respuesta

5

El número de elementos DOM sólo entraría en la imagen, si está haciendo una gran cantidad de DOM y/o Manipulación de CSS en la página a través de Javascript. Escanear un ID en una página con 50,000 elementos siempre será más lento que una página con solo 500. Cambiar un estilo CSS que es heredado por la mayoría de la página probablemente redibuje/rediseñe más de lo que lo haría en un simple página, etc. ...

La única forma de reducir el número de elementos es simplificar la página.

Fuente

2011-05-16 19:39:08

+0

Entonces, ¿es un recuento de 1200+ no inusual entonces? Estoy seguro de que he notado que las herramientas de desarrollo de Chrome se están desacelerando durante la última semana ... – wilsonpage

+4

Cada etiqueta de la página se convierte en un elemento. Si necesita más de 1200 etiquetas para representar "mundo de saludo", entonces tiene un problema. Depende del contenido –

+2

@MarcB - '

' –

3

Hemos creado una aplicación web de una sola página. Inicialmente, Yslow me preocupó ya que teníamos más de 2,000 objetos DOM en la página.

Después de un trabajo, conseguimos que todos los demás artículos Yslow se vuelvan verdes. Y terminamos viviendo con eso (alrededor de 1,800 en este momento) ya que la aplicación es muy rápida en varios navegadores.

Pero no admitimos IE6 e IE7, y podría ser diferente para estos navegadores.

Fuente

2011-05-16 20:32:50 Mic

+0

¡Gracias por compartir tu experiencia! No me preocuparé demasiado. Tengo que soportar IE7 desafortunadamente pero no IE6. – wilsonpage

2

¿Cómo puedo reducir drásticamente el número de elementos DOM?

Al usar solo aquellos elementos que sean necesarios. Si quieres un consejo más elaborado, publica tu código.

¿Tendré que cargar más del contenido bajo demanda (ajax) en lugar de todo en la carga de la página?

Si desea que su página tenga un mejor rendimiento en la puesta en marcha, puede hacerlo.

¿Tiene una gran cantidad de elementos DOM tienen un gran impacto en el rendimiento?

No necesariamente.

Fuente

2011-05-16 20:46:16

0

Puede representar elementos a pedido cuando el usuario hace clic en un botón o puede usar la carga diferida como Twitter.

Fuente

2011-09-23 11:57:44 Fatih

Cuestiones relacionadas

 Cuestiones relacionadas