Zgodnie z twoją próbką
<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>
z grubsza wykonanie przebiega w następujący sposób:
- Dokument HTML zostanie pobrany
- Rozpoczyna się parsowanie dokumentu HTML
- Parsowanie HTML sięga
<script src="jquery.js" ...
jquery.js jest pobierany i analizowany- Parsowanie HTML sięga
<script src="abc.js" ...
abc.js jest pobierany, analizowany i uruchamiany- Parsowanie HTML sięga
<link href="abc.css" ...
abc.css jest pobierany i analizowany- Parsowanie HTML sięga
<style>...</style>
- Wewnętrzne reguły CSS są analizowane i definiowane
- Parsowanie HTML sięga
<script>...</script>
- Wewnętrzny Javascript jest analizowany i uruchamiany
- Parsowanie HTML sięga
<img src="abc.jpg" ...
abc.jpg jest pobierany i wyświetlany- Parsowanie HTML sięga
<script src="kkk.js" ...
kkk.js jest pobierany, analizowany i uruchamiany- Analiza dokumentów HTML kończy się
Pamiętaj, że pobieranie może być asynchroniczne i nieblokujące ze względu na zachowanie przeglądarki. Na przykład w przeglądarce Firefox jest to ustawienie, które ogranicza liczbę jednoczesnych żądań na domenę.
Zależnie od tego, czy komponent został już buforowany, czy nie, może nie zostać ponownie zażądany w najbliższym żądaniu. Jeśli komponent został buforowany, zostanie on załadowany z pamięci podręcznej zamiast z rzeczywistego adresu URL.
Po zakończeniu analizowania, gdy dokument jest gotowy i załadowany, zdarzenia onloadsą uruchamiane. Tak więc po onloadzwolnieniu $("#img").attr("src","kkk.png");jest uruchamiany. Więc:
- Dokument jest gotowy, uruchamiane jest ładowanie.
- Trafienia wykonania JavaScript
$("#img").attr("src", "kkk.png");
kkk.png jest pobierany i ładowany do #img
$(document).ready()Wydarzenie jest rzeczywiście wydarzenie zwolniony, gdy wszystkie elementy strony są załadowane i gotowe. Przeczytaj więcej na ten temat: http://docs.jquery.com/Tutorials:Introducing_$ (dokument) .ready ()
Edycja - ta część omawia bardziej szczegółowo część równoległą lub nie:
Domyślnie iz mojego obecnego stanu wiedzy przeglądarka zwykle uruchamia każdą stronę na 3 sposoby: parser HTML, Javascript / DOM i CSS.
Analizator składni HTML jest odpowiedzialny za parsowanie i interpretację języka znaczników, a zatem musi mieć możliwość wykonywania połączeń z pozostałymi 2 komponentami.
Na przykład, gdy parser natrafi na tę linię:
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
Analizator składni wykona 3 połączenia, dwa do Javascript i jedno do CSS. Po pierwsze, analizator składni utworzy ten element i zarejestruje go w przestrzeni nazw DOM wraz ze wszystkimi atrybutami związanymi z tym elementem. Po drugie, analizator składni wywoła zdarzenie onclick z tym konkretnym elementem. Na koniec wykona kolejne wywołanie wątku CSS, aby zastosować styl CSS do tego konkretnego elementu.
Wykonanie jest z góry na dół i jednowątkowe. JavaScript może wyglądać na wiele wątków, ale faktem jest, że JavaScript jest jednowątkowy. Dlatego podczas ładowania zewnętrznego pliku javascript parsowanie głównej strony HTML jest zawieszone.
Pliki CSS można jednak pobierać jednocześnie, ponieważ reguły CSS są zawsze stosowane - co oznacza, że elementy są zawsze odświeżane zgodnie z najświeższymi zdefiniowanymi regułami CSS - w ten sposób odblokowując je.
Element będzie dostępny w modelu DOM dopiero po jego przeanalizowaniu. Dlatego podczas pracy z określonym elementem skrypt jest zawsze umieszczany po zdarzeniu onload okna lub w nim.
Taki skrypt spowoduje błąd (w jQuery):
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>
Ponieważ podczas analizowania skryptu #mydivelement nadal nie jest zdefiniowany. Zamiast tego działałoby:
<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
LUB
<script type="text/javascript">/* <![CDATA[ */
$(window).ready(function(){
alert($("#mydiv").html());
});
/* ]]> */</script>
<div id="mydiv">Hello World</div>
