Selon votre échantillon,
<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>
En gros, le flux d'exécution est à peu près le suivant :
- Le document HTML est téléchargé
- L'analyse du document HTML commence
- Parsing HTML atteint
<script src="jquery.js" ...
-
jquery.js est téléchargé et analysé
- L'analyse HTML est atteinte
<script src="abc.js" ...
-
abc.js est téléchargé, analysé et exécuté
- L'analyse HTML est atteinte
<link href="abc.css" ...
-
abc.css est téléchargé et analysé
- L'analyse HTML est atteinte
<style>...</style>
- Les règles CSS internes sont analysées et définies
- L'analyse HTML est atteinte
<script>...</script>
- Le Javascript interne est analysé et exécuté
- Parsing HTML atteint
<img src="abc.jpg" ...
-
abc.jpg est téléchargé et affiché
- Parsing HTML atteint
<script src="kkk.js" ...
-
kkk.js est téléchargé, analysé et exécuté
- Analyse syntaxique des fins de document HTML
Notez que le téléchargement peut être asynchrone et non bloquant en raison des comportements du navigateur. Par exemple, dans Firefox, il y a ce paramètre qui limite le nombre de requêtes simultanées par domaine.
De plus, selon que le composant a déjà été mis en cache ou non, il se peut que le composant ne soit pas demandé à nouveau lors d'une prochaine demande. Si le composant a été mis en cache, il sera chargé à partir du cache au lieu de l'URL actuelle.
Lorsque l'analyse syntaxique est terminée et que le document est prêt et chargé, les événements suivants se produisent onload est tiré. Ainsi, lorsque onload est tirée, la $("#img").attr("src","kkk.png"); est exécuté. Donc :
- Le document est prêt, le chargement est déclenché.
- Hits d'exécution Javascript
$("#img").attr("src", "kkk.png");
-
kkk.png est téléchargé et chargé dans #img
El $(document).ready() est en fait l'événement déclenché lorsque tous les composants de la page sont chargés et prêts. Pour en savoir plus : [http://docs.jquery.com/Tutorials:Introducing\_$(document).ready()](http://docs.jquery.com/Tutorials:Introducing_$(document).ready())
Edit - Cette partie développe davantage la partie parallèle ou non :
Par défaut, et d'après ma compréhension actuelle, le navigateur exécute généralement chaque page de 3 façons : Analyseur HTML, Javascript/DOM, et CSS.
L'analyseur HTML est responsable de l'analyse et de l'interprétation du langage de balisage et doit donc être capable de faire des appels aux deux autres composants.
Par exemple, lorsque l'analyseur syntaxique tombe sur cette ligne :
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
L'analyseur fera 3 appels, deux à Javascript et un à CSS. Premièrement, l'analyseur créera cet élément et l'enregistrera dans l'espace de noms DOM, avec tous les attributs liés à cet élément. Deuxièmement, l'analyseur syntaxique appellera pour lier l'événement onclick à cet élément particulier. Enfin, il fera un autre appel au fil CSS pour appliquer le style CSS à cet élément particulier.
L'exécution est descendante et monofilaire. Javascript peut sembler multithreadé, mais le fait est que Javascript est single threadé. C'est pourquoi, lors du chargement d'un fichier javascript externe, l'analyse de la page HTML principale est suspendue.
Cependant, les fichiers CSS peuvent être téléchargés simultanément car les règles CSS sont toujours appliquées - c'est-à-dire que les éléments sont toujours repeints avec les règles CSS les plus récentes définies - ce qui permet de débloquer la situation.
Un élément ne sera disponible dans le DOM qu'après avoir été analysé. Ainsi, lorsqu'on travaille avec un élément spécifique, le script est toujours placé après, ou dans l'événement onload de la fenêtre.
Un script comme celui-ci provoquera une erreur (sur jQuery) :
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>
Parce que lorsque le script est analysé, #mydiv n'est toujours pas défini. A la place, ceci fonctionnerait :
<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
OU
<script type="text/javascript">/* <![CDATA[ */
$(window).ready(function(){
alert($("#mydiv").html());
});
/* ]]> */</script>
<div id="mydiv">Hello World</div>
11 votes
Steve Souders a réalisé de nombreux travaux dans ce domaine. Recherchez steve+souders+high+performance sur Google et jetez-y un œil.
3 votes
Je ne parle pas d'optimisation des performances. Je veux connaître les détails.
2 votes
En lisant son travail, ma compréhension de la façon dont "ça" fonctionne en détail a été décuplée, donc c'est toujours un commentaire valable. Je ne suis pas autorisé par les droits d'auteur à citer l'intégralité de son livre ici, je vous suggère donc de consulter son ouvrage.
3 votes
Une excellente description de l'ordre dans lequel les choses se passent est aquí
0 votes
Accrochage stackoverflow.com/q/12122369/632951