¿Carga y secuencia de ejecución de una página web?
He realizado algunos proyectos basados en web, pero no pienso demasiado en la secuencia de carga y ejecución de una página web ordinaria. Pero ahora necesito saber detalles. Es difícil encontrar respuestas de Google o SO, así que creé esta pregunta.
Una página de muestra es así:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="abc.js" type="text/javascript">
</script>
<link rel="stylesheets" type="text/css" href="abc.css"></link>
<style>h2{font-wight:bold;}</style>
<script>
$(document).ready(function(){
$("#img").attr("src", "kkk.png");
});
</script>
</head>
<body>
<img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
<script src="kkk.js" type="text/javascript"></script>
</body>
</html>
Asi que aqui están mis preguntas:
¿Cómo se carga esta página?¿Cuál es la secuencia de la carga?¿Cuándo se ejecuta el código JS? (inline y externo)¿Cuándo se ejecuta el CSS?¿Cuándo se ejecuta $ (documento) .ready?¿Se descargará abc.jpg? ¿O simplemente descarga kkk.png?Tengo el siguiente entendimiento:
El navegador carga el html (DOM) al principio.El navegador comienza a cargar los recursos externos de arriba a abajo, línea por línea.Si un<script> se cumple, la carga se bloqueará y esperará hasta que el archivo JS se cargue y se ejecute y luego continúe.Otros recursos (CSS / imágenes) se cargan en paralelo y se ejecutan si es necesario (como CSS).O es así:
El navegador analiza el html (DOM) y obtiene los recursos externos en una matriz o estructura similar a una pila. Una vez que se carga el html, el navegador comienza a cargar los recursos externos en la estructura en paralelo y se ejecuta, hasta que se cargan todos los recursos. Luego, se cambiará el DOM correspondiente a los comportamientos del usuario dependiendo de la JS.
¿Alguien puede dar una explicación detallada sobre lo que sucede cuando obtiene la respuesta de una página html? ¿Esto varía en diferentes navegadores? ¿Alguna referencia sobre esta pregunta?
Gracias.
EDITAR:
Hice un experimento en Firefox con Firebug. Y se muestra como la siguiente imagen: