¿Está bien manipular dom antes del estado listo?

StackOverflow https://stackoverflow.com/questions/1222849

Pregunta

Generalmente, así es como manejo la mejora progresiva mientras mantengo la experiencia limpia, pero ¿qué tan segura es? ¿hay potencial para una condición de carrera y esto no funciona?

Imagina el escenario abstracto simple, quieres mostrar algo diferente si tienes soporte para JavaScript ... esto es generalmente lo que terminaré haciendo: 

<div id="test">original</div>
<script type="text/javascript">
    var t = document.getElementById('test');
    t.innerHTML = 'changed';
</script>

Muchos pueden afirmar que debe usar un marco y esperar un evento domready, y hacer cambios allí ... sin embargo, hay un retraso significativo en el que el elemento 'prueba' ya se habrá presentado antes del final del documento y el CSS están listos y un domready se dispara ... causando así un notable parpadeo de 'original'.

¿Es este código responsable de fallas en las condiciones de carrera? ¿o puedo garantizar que un elemento es reconocible y modificable si existe antes del script?

Gracias de antemano.

¿Fue útil?

Solución

Puedes, pero hay problemas relacionados con hacerlo.

En primer lugar, en IE si intenta manipular un nodo que no se ha cerrado (por ejemplo, BODY antes de su etiqueta de cierre que debería estar debajo de su JS), entonces puede encontrar IE '' OPERACIÓN ABORTADA '' error que dará como resultado una página en blanco. La manipulación de un nodo incluye nodos anexos, nodos móviles, etc.

En otros navegadores, el comportamiento es indefinido, sin embargo, generalmente se comportan como cabría esperar. El problema principal es que a medida que su página evoluciona, la página puede cargar / analizar / ejecutarse de manera diferente. Esto puede hacer que se ejecute algún script antes de que un navegador defina que los elementos a los que se hace referencia se hayan creado y estén disponibles para la manipulación DOM.

Si está intentando mejorar el rendimiento percibido por el usuario (es decir, la felicidad). Le sugiero que evite este camino y busque aclarar sus páginas. Puede usar YSlow de Yahoo / Firebug de rendimiento de página de Google para ayudarlo a comenzar.

Velocidad de la página de Google

YSlow de Yahoo

Otros consejos

Puede manipular el DOM antes de que se haya cargado completamente, pero puede ser arriesgado. Obviamente, no puede garantizar que el bit del DOM que está tratando de manipular realmente exista todavía, por lo que su código puede fallar intermitentemente.

Mientras solo modifique nodos que preceden al bloque de script (es decir, la etiqueta de cierre del nodo precede a la etiqueta de apertura del script), no debería encontrar ningún problema.

Si desea asegurarse de que la operación tenga éxito, envuelva el código en un bloque try ... catch y vuelva a llamarlo a través de setTimeout () en caso de error.

En Viajeros.com tengo un indicador de carga funcionando desde 8-9 meses y no tengo problemas hasta ahora. Se ve así: 

<body>

<script type="text/javascript">
    try {
        document.write('<div id="cargando"><p>Cargando...<\/p><\/div>');
        document.getElementById("cargando").style.display = "block";
    } catch(E) {};
</script>

Acceder al DOM de forma prematura arroja excepciones en IE 5 y Navigator 4.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top