Secondo il tuo campione,
<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>
all'incirca il flusso di esecuzione è il seguente:
- Il documento HTML viene scaricato
- Inizia l'analisi del documento HTML
- Raggiunge l'analisi HTML
<script src="jquery.js" ...
jquery.js viene scaricato e analizzato- Raggiunge l'analisi HTML
<script src="abc.js" ...
abc.js viene scaricato, analizzato ed eseguito- Raggiunge l'analisi HTML
<link href="abc.css" ...
abc.css viene scaricato e analizzato- Raggiunge l'analisi HTML
<style>...</style>
- Le regole CSS interne vengono analizzate e definite
- Raggiunge l'analisi HTML
<script>...</script>
- Javascript interno viene analizzato ed eseguito
- Raggiunge l'analisi HTML
<img src="abc.jpg" ...
abc.jpg viene scaricato e visualizzato- Raggiunge l'analisi HTML
<script src="kkk.js" ...
kkk.js viene scaricato, analizzato ed eseguito- L'analisi dei documenti HTML termina
Si noti che il download può essere asincrono e non bloccante a causa dei comportamenti del browser. Ad esempio, in Firefox esiste questa impostazione che limita il numero di richieste simultanee per dominio.
Inoltre, a seconda che il componente sia già stato memorizzato nella cache o meno, il componente potrebbe non essere più richiesto in una richiesta futura. Se il componente è stato memorizzato nella cache, il componente verrà caricato dalla cache anziché dall'URL effettivo.
Al termine dell'analisi e il documento è pronto e caricato, gli eventi onloadvengono generati. Quindi quando onloadviene sparato, $("#img").attr("src","kkk.png");viene eseguito. Così:
- Il documento è pronto, il caricamento è attivato.
- Hit di esecuzione Javascript
$("#img").attr("src", "kkk.png");
kkk.png viene scaricato e caricato in #img
L' $(document).ready()evento è in realtà l'evento generato quando tutti i componenti della pagina sono caricati e pronti. Per saperne di più: http://docs.jquery.com/Tutorials:Introducing_$ (documento) .ready ()
Modifica: questa parte elabora di più sul parallelo o no:
Per impostazione predefinita, e dalla mia attuale comprensione, il browser di solito esegue ogni pagina in 3 modi: parser HTML, Javascript / DOM e CSS.
Il parser HTML è responsabile dell'analisi e dell'interpretazione del linguaggio di markup e quindi deve essere in grado di effettuare chiamate agli altri 2 componenti.
Ad esempio quando il parser si imbatte in questa linea:
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
Il parser effettuerà 3 chiamate, due a Javascript e una a CSS. In primo luogo, il parser creerà questo elemento e lo registrerà nello spazio dei nomi DOM, insieme a tutti gli attributi relativi a questo elemento. In secondo luogo, il parser chiamerà per associare l'evento onclick a questo particolare elemento. Infine, effettuerà un'altra chiamata al thread CSS per applicare lo stile CSS a questo particolare elemento.
L'esecuzione è top down e single thread. Javascript può sembrare multi-thread, ma il fatto è che Javascript è single thread. Questo è il motivo per cui quando si carica un file javascript esterno, l'analisi della pagina HTML principale viene sospesa.
Tuttavia, i file CSS possono essere scaricati contemporaneamente perché vengono sempre applicate le regole CSS - il che significa che gli elementi vengono sempre riverniciati con le regole CSS più recenti definite - rendendolo quindi sbloccabile.
Un elemento sarà disponibile nel DOM solo dopo che è stato analizzato. Pertanto, quando si lavora con un elemento specifico, lo script viene sempre inserito dopo o all'interno dell'evento onload della finestra.
Script come questo causeranno errori (su jQuery):
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>
Perché quando lo script viene analizzato, l' #mydivelemento non è ancora definito. Invece questo avrebbe funzionato:
<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>
