Nach Ihrer Stichprobe,
<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>
Der Ausführungsfluss ist ungefähr wie folgt:
- Das HTML-Dokument wird heruntergeladen
- Das Parsen des HTML-Dokuments beginnt
- HTML-Analyse erreicht
<script src="jquery.js" ...
jquery.js wird heruntergeladen und analysiert- HTML-Analyse erreicht
<script src="abc.js" ...
abc.js wird heruntergeladen, analysiert und ausgeführt- HTML-Analyse erreicht
<link href="abc.css" ...
abc.css wird heruntergeladen und analysiert- HTML-Analyse erreicht
<style>...</style>
- Interne CSS-Regeln werden analysiert und definiert
- HTML-Analyse erreicht
<script>...</script>
- Internes Javascript wird analysiert und ausgeführt
- HTML-Analyse erreicht
<img src="abc.jpg" ...
abc.jpg wird heruntergeladen und angezeigt- HTML-Analyse erreicht
<script src="kkk.js" ...
kkk.js wird heruntergeladen, analysiert und ausgeführt- Das Parsen des HTML-Dokuments wird beendet
Beachten Sie, dass der Download aufgrund des Verhaltens des Browsers möglicherweise asynchron und nicht blockierend ist. In Firefox gibt es beispielsweise diese Einstellung, die die Anzahl gleichzeitiger Anforderungen pro Domäne begrenzt.
Abhängig davon, ob die Komponente bereits zwischengespeichert wurde oder nicht, wird die Komponente möglicherweise in naher Zukunft nicht erneut angefordert. Wenn die Komponente zwischengespeichert wurde, wird die Komponente anstelle der tatsächlichen URL aus dem Cache geladen.
Wenn die Analyse beendet ist und das Dokument bereit und geladen ist, werden die Ereignisse onloadausgelöst. Wenn onloadalso abgefeuert wird, $("#img").attr("src","kkk.png");wird der ausgeführt. So:
- Dokument ist fertig, Onload wird ausgelöst.
- Javascript-Ausführungstreffer
$("#img").attr("src", "kkk.png");
kkk.png wird heruntergeladen und geladen in #img
Das $(document).ready()Ereignis ist tatsächlich das Ereignis, das ausgelöst wird, wenn alle Seitenkomponenten geladen und bereit sind. Lesen Sie mehr darüber: http://docs.jquery.com/Tutorials:Introducing_$ (document) .ready ()
Bearbeiten - In diesem Abschnitt wird mehr auf den parallelen oder nicht parallelen Teil eingegangen:
Standardmäßig und nach meinem derzeitigen Verständnis führt der Browser jede Seite normalerweise auf drei Arten aus: HTML-Parser, Javascript / DOM und CSS.
Der HTML-Parser ist für das Parsen und Interpretieren der Auszeichnungssprache verantwortlich und muss daher in der Lage sein, die beiden anderen Komponenten aufzurufen.
Zum Beispiel, wenn der Parser auf diese Zeile stößt:
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
Der Parser führt drei Aufrufe durch, zwei an Javascript und einen an CSS. Zunächst erstellt der Parser dieses Element und registriert es im DOM-Namespace zusammen mit allen Attributen, die sich auf dieses Element beziehen. Zweitens ruft der Parser auf, um das Ereignis onclick an dieses bestimmte Element zu binden. Zuletzt wird der CSS-Thread erneut aufgerufen, um den CSS-Stil auf dieses bestimmte Element anzuwenden.
Die Ausführung erfolgt von oben nach unten und mit einem Thread. Javascript mag multithreaded aussehen, aber Tatsache ist, dass Javascript Single-Threaded ist. Aus diesem Grund wird beim Laden einer externen Javascript-Datei das Parsen der HTML-Hauptseite angehalten.
Die CSS-Dateien können jedoch gleichzeitig heruntergeladen werden, da CSS-Regeln immer angewendet werden. Dies bedeutet, dass Elemente immer mit den aktuellsten definierten CSS-Regeln neu gestrichen werden, wodurch die Blockierung aufgehoben wird.
Ein Element ist im DOM erst verfügbar, nachdem es analysiert wurde. Wenn Sie also mit einem bestimmten Element arbeiten, wird das Skript immer nach oder innerhalb des Fenster-Onload-Ereignisses platziert.
Ein solches Skript verursacht Fehler (in jQuery):
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>
Denn wenn das Skript analysiert wird, ist das #mydivElement immer noch nicht definiert. Stattdessen würde dies funktionieren:
<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
ODER
<script type="text/javascript">/* <![CDATA[ */
$(window).ready(function(){
alert($("#mydiv").html());
});
/* ]]> */</script>
<div id="mydiv">Hello World</div>
