Згідно з вашим зразком,
<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>
Приблизно потік виконання приблизно такий:
- Документ HTML завантажується
- Розпочнеться розбір документа HTML
- Розділення HTML досягає
<script src="jquery.js" ...
jquery.js завантажується та розбирається- Досягається розбір HTML
<script src="abc.js" ...
abc.js завантажується, розбирається та запускається- Досягається розбір HTML
<link href="abc.css" ...
abc.css завантажується та розбирається- Досягається розбір HTML
<style>...</style>
- Внутрішні правила CSS аналізуються та визначаються
- Досягається розбір HTML
<script>...</script>
- Внутрішній Javascript розбирається та працює
- Розділення HTML досягає
<img src="abc.jpg" ...
abc.jpg завантажується та відображається- Розділення HTML досягає
<script src="kkk.js" ...
kkk.js завантажується, розбирається та запускається- Розбір документа HTML закінчується
Зауважте, що завантаження може бути асинхронним і не блокувати через поведінку браузера. Наприклад, у Firefox є цей параметр, який обмежує кількість одночасних запитів на домен.
Також залежно від того, компонент уже кешований чи ні, компонент може не запитуватися знову в найближчому майбутньому. Якщо компонент був кешований, компонент буде завантажений з кеша замість фактичної URL-адреси.
Коли розбір закінчується і документ готовий і завантажується, події onloadзапускаються. Таким чином, коли onloadвистрілюється, $("#img").attr("src","kkk.png");запускається. Так:
- Документ готовий, завантаження запущено.
- Виконання Javascript
$("#img").attr("src", "kkk.png");
kkk.png завантажується і завантажується в #img
$(document).ready()Подія насправді ця подія спрацьовує , коли всі компоненти сторінки завантажуються і готові. Докладніше про це: http://docs.jquery.com/Tutorials:Introducing_$ (document) .ready ()
Редагувати - ця частина детальніше деталізується про паралельну чи не частину:
За замовчуванням і за моїм сучасним розумінням, браузер зазвичай запускає кожну сторінку трьома способами: HTML-аналізатор, Javascript / DOM та CSS.
HTML-аналізатор несе відповідальність за аналіз та інтерпретацію мови розмітки, і таким чином повинен бути в змозі здійснювати дзвінки на інші 2 компоненти.
Наприклад, коли аналізатор стикається з цим рядком:
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
Аналізатор здійснить 3 дзвінки, два у Javascript та один у CSS. По-перше, аналізатор створить цей елемент і зареєструє його в просторі імен DOM разом з усіма атрибутами, пов'язаними з цим елементом. По-друге, аналізатор закликає прив’язати подію onclick до цього конкретного елемента. Нарешті, він здійснить ще один виклик у потоці CSS, щоб застосувати стиль CSS до цього конкретного елемента.
Виконання зверху вниз і однопоточне. Javascript може виглядати багатопотоково, але факт полягає в тому, що Javascript є однопотоковою. Ось чому під час завантаження зовнішнього файлу JavaScript розбір основної HTML-сторінки призупиняється.
Однак файли CSS можна завантажувати одночасно, оскільки правила CSS завжди застосовуються - це означає, що елементи завжди перефарбовуються за допомогою найсвіжіших визначених правил CSS - таким чином, роблячи його розблокуванням.
Елемент буде доступний у DOM лише після його розбору. Таким чином, при роботі з певним елементом сценарій завжди розміщується після події завантаження вікна або всередині нього.
Такий сценарій спричинить помилку (на jQuery):
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>
Тому що, коли сценарій розбирається, #mydivелемент все ще не визначений. Натомість це спрацювало б:
<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
АБО
<script type="text/javascript">/* <![CDATA[ */
$(window).ready(function(){
alert($("#mydiv").html());
});
/* ]]> */</script>
<div id="mydiv">Hello World</div>
