Demasiados elementos DOM

Estoy construyendo una aplicación web de una página y está empezando a crecer bastante. Hay varios componentes en la aplicación, cada uno con un estilo meticuloso. En promedio, la aplicación tiene un recuento de elementos DOM de más de 1200. Mi escaneo YSlow me advirtió que esto es demasiado y que no debería tener más de 700 elementos DOM.

Por lo general, 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 que funcione en todos los navegadores.

¿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 encantaría escuchar la experiencia de las personas con esto y cualquier solución que pueda tener ...

preguntado el 16 de mayo de 11 a las 19:05

Si puede proporcionar algún ejemplo de HTML y / o Javascript, podríamos recomendarle cómo condensarlo. -

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

¿De qué navegas estamos hablando aquí? -

"Tiendo a usar una gran cantidad de elementos DOM para obtener el estilo exactamente correcto y que funcione en todos los navegadores" - elabore por favor. -

4 Respuestas

La cantidad de elementos dom solo entraría en la imagen si está haciendo mucha manipulación de DOM y / o CSS en la página a través de Javascript. Buscar 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 parte de la página probablemente conducirá a más redibujado / reflujo que en una página, etc ...

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

contestado el 16 de mayo de 11 a las 23:05

Entonces, ¿no es inusual contar con más de 1200? Estoy seguro de que he notado que las herramientas de desarrollo de Chrome se ralentizaron durante la última semana ... - wilsonpage

Cada etiqueta de tu página se convierte en un elemento. Si necesitas más de 1200 etiquetas para representar "hola mundo", entonces tienes un problema. Depende del contenido. - Marc B

@MarcB - <div id="aA"></div><script>var hw = [ 'h','e','l','l','o',' ','w','o','r','l','d' ];for(var i = 1;i < 1200; i++){ var a = document.createElement("span"); if(i % 100 == 0) a.innerHTML = hw[(i/100)-1];document.getElementById("aA").appendChild(a);}</script> - Travis J

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

Después de un poco de trabajo, todos los demás elementos de Yslow se pusieron verdes. Y terminamos viviendo con él (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.

contestado el 17 de mayo de 11 a las 00:05

¡Interesante gracias por compartir tu experiencia! No me preocupare demasiado. Tengo que admitir IE7, desafortunadamente, pero no IE6. - wilsonpage

¿Cómo puedo reducir drásticamente la cantidad de elementos DOM?

Utilizando solo aquellos elementos que sean necesarios. Si desea un consejo más elaborado, publique su código.

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

Si desea que su página funcione mejor al inicio, puede hacerlo.

¿Una gran cantidad de elementos DOM tiene un gran impacto en el rendimiento?

No necesariamente.

contestado el 17 de mayo de 11 a las 00:05

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

Respondido el 23 de Septiembre de 11 a las 15:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.