Согласно вашему образцу,
<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:Introduction_$ (документ) .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 только после его анализа. Таким образом, при работе с конкретным элементом скрипт всегда помещается после или внутри события onload окна.
Такой скрипт вызовет ошибку (в 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>
