Los elementos DOM de una página web son prácticamente todos aquellos elementos con los que se puede interactuar de alguna manera. Básicamente se podría resumir en que son todos los tags, ID, clases, etc…

NÚMERO ELEVADO DE ELEMENTOS DOM
Categoría: Contenidos

El hecho de que los elementos DOM sean accesibles a través de lenguajes como JavaScript puede provocar que, con un número elevado de elementos, la página se pueda llegar a sobrecargar y hacer que el acceso a estos recursos se ralentice enormemente.

Es por esto que se recomienda intentar reducir el uso de elementos DOM al mínimo y mantenerlo por debajo de los 1.000, ya que a partir de esa cifra se considera que los navegadores comienzan a perder “facultades” si han de modificar alguna cosa.

Una forma de saber cuántos elementos DOM estamos utilizando es ejecutar en la consola de Firebug la siguiente consulta:


document.getElementsByTagName('*').length


REDUCIR EL NÚMERO DE <IFRAME>
Categoría: Contenidos

Los elementos que se incluyen en un <iframe> no dejan de ser páginas dentro de otras páginas, pero con la gran diferencia de que están anidadas.

El uso de iFrames provoca que el número de elementos del DOM casi se duplique, por lo que el navegador ha de gestionar el doble de elementos, y encima anidados, de forma que gestionar o hacer algún cambio en la página puede provocar un colapso.
 
USAR TABLAS CON ANCHO FIJO
Categoría: Contenidos

Aunque hoy en día cada vez se utilizan menos las tablas en HTML, una forma de hacer que el navegador procese mucho más rápido las tablas es dándole las medidas de la misma. Si dejamos que los contenidos de la tabla se ajusten a las celdas, el navegador no podrá precalcular ni renderizar la misma hasta que no acabe de cargarse.

Por norma general la mejor forma de adaptar el tamaño sería haciéndolo mediante CSS y teniendo en cuenta estos tres elementos:

• Establecer el elemento CSS table-layout a fixed en la tabla.
• Definir de forma explícita los col para cada columna.
• Establecer el atributo width para cada columna.

CERRAR LOS ELEMENTOS HTML
Categoría: Contenidos

A diferencia del XML, el HTML permite el cierre de elementos (tags HTML) de forma implícita, lo que significa que algunos elementos como el P, LI, IMG… no tienen porqué tener el bloque que los cierra.

Este hecho hace que sea el navegador el que tenga que calcular cuándo comienza y acaba un bloque de elementos, lo que hace que el renderizado sea más elevado en tiempo y coste.