Comportamiento extraño de elemento <script>

Falcon_ARG · #1 (**permalink**) 29/11/2013, 09:44

Hola,

Estoy estudiando JavaScript, pero lo estoy haciendo de una manera muy profunda.

Me encuentro ante una duda con respecto al elemento <script>.

Según algunos autores, el elemento <script> debe ir al fondo de la página, es decir, antes de la etiqueta de cierre del body (</body>) - sé que esto no se recomienda para todos los casos dado que podemos tener scripts que se necesiten en el head debido a que realizan modificaciones al contenido -. La idea de esto es que el script no sea descargado, parseado y ejecutado. En su lugar, el script es descargado DESPUÉS del contenido, se analiza DESPUÉS del contenido y se ejecuta DESPUÉS de que el contenido sea mostrado al usuario. Al menos, yo pensaba eso...

Hice la siguiente prueba:

Usé el siguiente código JS de forma deliberada:

Código:

for(var i = 0; i < 100000000; i++)

Como dije, es de forma deliberada por favor no me digan que es un bucle incompleto.

Y tengo el siguiente código HTML

Código HTML:

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
     <script src="js/code.js"></script>
   </body>
</html>

En teoría, dado q el script está al final de la página, el contenido debería mostrarse primero y después tardar en ejecutarse el script. SIN EMBARGO, esto no sucede y el contenido se muestra sólo después de la ejecución del script. He pensado que el script puede estar bloqueando el UI thread del browser, pero no tiene mucho sentido para mi debido a que el script ESTÁ AL FINAL! O.o No comprendo qué es lo que sucede.

Espero que puedan resolverlo porque la verdad que no entiendo qué es lo que pasa.

Un saludo.

EDITO: No me digan por favor que use atributos como async o defer para "solucionar el problema" porque NO TENGO NINGÚN PROBLEMA! Quiero saber qué es lo que sucede, saber si hay algo que desconozco acerca de cómo el navegador se encarga de la ejecución del script. Además, he usado async y defer y el problema persiste.

marlanga · #2 (**permalink**) 29/11/2013, 10:01

No importa donde lo pongas. Los navegadores lo ejecutarán antes de dibujarte la página. pero hay una diferencia. Si pones el script en el head, cuando se ejecute javascript, no existirá ningún elemento HTML en su contexto, asi que si ejecutas instrucciones de recuperación de elementos HTML como document.getElemenById, nunca encontrarán nada. Así que algunos gurús eligieron poner el script abajo del todo como último elemento del BODY. Así, javascript podría manipular cualquier elemento del DOM cuando se ejecutase.

Pero esa tampoco es la mejor forma de hacerlo. Lo mejor es meter el código en el head, y utilizar los eventos de el objeto window para ejecutar código que necesite trabajar con el DOM. Puedes declarar funciones y variables fuera de eevento load. Lo que no puedes hacer fuera del load es llamar a la función para que recupere o actúe sobre los elementos. Por ejmplo:

Código Javascript:

Ver original<script>
function meterTexto(id, texto){
    var elemento=document.getElementById(id);
    if (elemento) elemento.innerHTML=texto;
}
window.onload=function(){
    meterTexto("contenido","Este es el div de contenido");
}
</script>

Si conoces otros lenguages como JAVA o C, imagina que window.onload=function(){ ..... } ó window.addEventListener("load", function(){ ...... }) es el MAIN; que sólo se ejecutará cuando absolutamente toda la página HTML y scripts estén cargados. pero ojo, puede que haya imágenes que aún estén descargándose, con la página HTML me refiero a su árbol DOM.

Falcon_ARG · #3 (**permalink**) 29/11/2013, 10:08

Cita:

Iniciado por marlanga

No importa donde lo pongas. Los navegadores lo ejecutarán antes de dibujarte la página.

Estás 100% seguro acerca de eso? En teoría, para mi el browser recibe la respuesta HTTP y comienza a renderizar la página HTML desde el tope hasta el fondo. Cuando se encuentra con la etiqueta <script> detiene el renderizado y descarga, parsea y ejecuta el código JavaScript sea inline o externo. Esto se debe a que JavaScript es single-thread y normalmente los browsers los crean compartiendo este thread entre el UI y el código JS (esto es por lo que ya mencioné, que JS puede necesitar realizar modificaciones en el contenido. No tendría sentido renderizar toda la página y después cambiar algún elemento del contenido).

Creo que la respuesta no va por ahí...

marlanga · #4 (**permalink**) 29/11/2013, 10:34

No pueden renderizar en cuanto le llegan los elementos, porque el DOM es un árbol. Es significa que abrirás elementos que cerrarás mucho despues, y no puede dibujarlos bien hasta que sepa qué es lo que tienen dentro.Si lo hicieran, se vería un horrible parpadeo de elementos que de pronto cambian de posición, se agrandan, desaparecen, etcétera. Pero también sabe que a veces los servidores tardan mucho en mandarte todos los paquetes de respuesta, o que el HTML que te mandan no está bien escrito, así que están preparados para renderizar cualquier cosa, tengan lo que tengan, pasado unos segundos de la última respuesta del servidor. Por eso a veces en servidores que van lentos porque son malísimos o porque están siendo atacados mediante DDOS, recibes respuestas parciales de las páginas, y a pesar de eso, el navegador las dibuja incompletas.

Y sí tiene sentido que javascript permita modificar el aspecto de la web en cuanto carga; de hecho hay frameworks MVC con UI propia para javascript que construyen toda la interfaz usando sólo instrucciones javascript, sin que el que los usa tenga que escribir apenas html en el body.

o al menos eso creo recordar, no puedo garantizar que sea 100% cierto, pero me apostaría la vida de todos los moderadores de este foro por ello.

Falcon_ARG · #5 (**permalink**) 29/11/2013, 11:12

Cita:

Iniciado por marlanga

no puedo garantizar que sea 100% cierto, pero me apostaría la vida de todos los moderadores de este foro por ello.

Espero que no hayas matado a ningún moderador

.

Respeto tu opinión, pero preferiría esperar a ver si existen otras respuestas al tema (si es que las hay). El otro tema que solventaría sería estudiar como funciona un browser internamente. Igual gracias por tus respuestas

.