Я сделал некоторые веб-проекты, но я не слишком много думаю о загрузке и последовательности выполнения обычной веб-страницы. Но теперь мне нужно знать подробности. Трудно найти ответы от Google или SO, поэтому я создал этот вопрос.
Примерная страница выглядит следующим образом:
<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>
Итак, вот мои вопросы:
- Как загружается эта страница?
- Какова последовательность загрузки?
- Когда выполняется код JS? (встроенный и внешний)
- Когда выполняется (применяется) CSS?
- Когда выполняется $(document).ready, выполняется?
- Будет ли загружено abc.jpg? Или просто скачайте kkk.png?
У меня есть следующее понимание:
- Сначала браузер загружает html (DOM).
- Браузер начинает загружать внешние ресурсы сверху вниз, строка за строкой.
- Если выполняется
<script>, загрузка будет заблокирована и дождитесь загрузки и запуска JS файла, а затем продолжения. - Другие ресурсы (CSS/изображения) загружаются параллельно и выполняются при необходимости (например, CSS).
Или это так:
Браузер анализирует html (DOM) и получает внешние ресурсы в структуре массива или стека. После загрузки html браузер начинает загружать внешние ресурсы в структуре параллельно и выполнять, пока не будут загружены все ресурсы. Затем DOM будет изменен в соответствии с поведением пользователя в зависимости от JS.
Может ли кто-нибудь дать подробное объяснение того, что происходит, когда вы получили ответ на html-страницу? Это зависит от разных браузеров? Любая ссылка на этот вопрос?
Спасибо.
EDIT:
Я сделал эксперимент в Firefox с Firebug. И это выглядит как следующее изображение:
