De acuerdo a su muestra,
<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>
aproximadamente el flujo de ejecución es aproximadamente como sigue:
- El documento HTML se descarga
- Comienza el análisis del documento HTML
- El análisis HTML alcanza
<script src="jquery.js" ...
jquery.js se descarga y analiza- El análisis HTML alcanza
<script src="abc.js" ...
abc.js se descarga, analiza y ejecuta- El análisis HTML alcanza
<link href="abc.css" ...
abc.css se descarga y analiza- El análisis HTML alcanza
<style>...</style>
- Las reglas internas de CSS se analizan y definen
- El análisis HTML alcanza
<script>...</script>
- Javascript interno se analiza y ejecuta
- El análisis HTML alcanza
<img src="abc.jpg" ...
abc.jpg se descarga y se muestra- El análisis HTML alcanza
<script src="kkk.js" ...
kkk.js se descarga, analiza y ejecuta- El análisis del documento HTML finaliza
Tenga en cuenta que la descarga puede ser asíncrona y no bloqueante debido a los comportamientos del navegador. Por ejemplo, en Firefox existe esta configuración que limita el número de solicitudes simultáneas por dominio.
Además, dependiendo de si el componente ya se ha almacenado en caché o no, es posible que no se vuelva a solicitar el componente en una solicitud futura. Si el componente se ha almacenado en caché, el componente se cargará desde la memoria caché en lugar de la URL real.
Cuando finaliza el análisis y el documento está listo y cargado, se activan los eventos onload. Por lo tanto, cuando onloadse dispara, $("#img").attr("src","kkk.png");se ejecuta. Entonces:
- El documento está listo, se dispara la carga.
- Aciertos de ejecución de Javascript
$("#img").attr("src", "kkk.png");
kkk.png se descarga y se carga en #img
El $(document).ready()evento es en realidad el evento que se dispara cuando todos los componentes de la página están cargados y listos. Lea más sobre esto: http://docs.jquery.com/Tutorials:Introducing_$ (document) .ready ()
Editar: esta parte elabora más sobre la parte paralela o no:
De manera predeterminada, y según mi conocimiento actual, el navegador generalmente ejecuta cada página de 3 formas: analizador HTML, Javascript / DOM y CSS.
El analizador HTML es responsable de analizar e interpretar el lenguaje de marcado y, por lo tanto, debe poder realizar llamadas a los otros 2 componentes.
Por ejemplo, cuando el analizador se encuentra con esta línea:
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
El analizador realizará 3 llamadas, dos a Javascript y una a CSS. En primer lugar, el analizador creará este elemento y lo registrará en el espacio de nombres DOM, junto con todos los atributos relacionados con este elemento. En segundo lugar, el analizador llamará para vincular el evento onclick a este elemento en particular. Por último, hará otra llamada al hilo CSS para aplicar el estilo CSS a este elemento en particular.
La ejecución es de arriba hacia abajo y de un solo hilo. Javascript puede parecer multiproceso, pero el hecho es que Javascript es de un solo subproceso. Es por eso que al cargar un archivo javascript externo, se suspende el análisis de la página HTML principal.
Sin embargo, los archivos CSS se pueden descargar simultáneamente porque las reglas CSS siempre se aplican, lo que significa que los elementos siempre se repintan con las reglas CSS más recientes definidas, lo que hace que se desbloquee.
Un elemento solo estará disponible en el DOM después de que se haya analizado. Por lo tanto, cuando se trabaja con un elemento específico, el script siempre se coloca después o dentro del evento de carga de la ventana.
Un script como este causará un error (en jQuery):
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>
Porque cuando se analiza el script, el #mydivelemento aún no está definido. En cambio, esto funcionaría:
<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
O
<script type="text/javascript">/* <![CDATA[ */
$(window).ready(function(){
alert($("#mydiv").html());
});
/* ]]> */</script>
<div id="mydiv">Hello World</div>
