Ответ 1
Страница HTML анализируется последовательно от начала до конца. Поскольку ресурсы встречаются, такие как таблицы стилей, изображения или сценарии, браузер запускает параллельные запросы для этих ресурсов.
Изображения и таблицы стилей не считаются блокирующими ресурсами, что означает, что синтаксический анализ остальной части страницы может продолжаться, пока эти ресурсы извлекаются.
Script теги, которые не отмечены defer или async, блокируются, и они должны загружаться и выполняться до продолжения анализа оставшейся части страницы.
Загружается ли раздел кузова только после загрузки главы полностью?
Да. Но это не обязательно ждет всех ресурсов, указанных в теге <head>. Он может начать синтаксический анализ <body>, прежде чем все ресурсы <head> будут извлечены. Но все теги в разделе <head> анализируются до начала разбора раздела <body>.
Полностью ли загружается css sheet1, а затем только файл sheet2 и JS начать загрузку?
Нет. Таблицы стилей загружаются параллельно, и страница не блокирует дальнейший синтаксический разбор, ожидая загрузки таблицы стилей.
Загружаются ли файлы CSS параллельно? то же самое с файлами JS..? или CSS и Параллельно загружается файл JS?
Файлы CSS загружаются параллельно. Несколько файлов script могут быть выбраны параллельно, но дальнейший синтаксический разбор не будет продолжаться до тех пор, пока не будет извлечен и выполнен файл script (если у него нет атрибута async или defer). В качестве оптимизации производительности браузеры могут "смотреть вперед" на другие ресурсы на странице и могут извлекать их параллельно. Например, несколько файлов script могут быть выбраны параллельно, хотя их выполнение должно быть серийным.
Так как изображения HQ * являются большими файлами, для загрузки требуется время. кнопка 2 загружать и отображаться на странице только после полной загрузки HQ1 и HQ2?
Нет, изображения загружаются асинхронно и не блокируют загрузку остальной части страницы или HTML-тегов.
Выполняется ли загрузка HQ1 и HQ2 параллельно, или это синхронный, который является первым HQ1, а затем HQ2?
Изображения загружаются параллельно до точки. Браузер имеет определенные ограничения на подключение и одновременно загружает до N ресурсов с одного и того же сервера одновременно. На вашей простой веб-странице HQ1 и HQ2, вероятно, будут загружаться параллельно - хотя это зависит от реализации браузера, а не в спецификации.
Какова последовательность, в которой загружается страница HTML
Итак, в вашей тестовой HTML-странице:
<html>
<head>
<link rel="stylesheet" href="css/sheet1.css">
<link rel="stylesheet" href="css/sheet2.css">
<script src="scripts/take1.js"></script>
<script src="scripts/take2.js"></script>
</head>
<body>
<button>button1</button>
<img src = "HQ1.jpg" />
<img src = "HQ2.jpg" />
<button>button2</button>
</body>
</html>
Здесь последовательность операций:
- Браузер анализирует теги
<html>и<head>. - Браузер сталкивается с первым тегом
<link>, видит ссылку на внешнюю таблицу стилей и инициирует запрос сервера для загрузки этой внешней таблицы стилей. Браузер не дождался завершения этого запроса. - Браузер встречает второй тег
<link>, видит ссылку на внешнюю таблицу стилей и инициирует запрос сервера для загрузки второй внешней таблицы стилей. Браузер не дождался завершения этого запроса. - Браузер встречает первый тег
<script>, определяющий внешний script файл. Браузер инициирует запрос от сервера для внешнего файла script. - Браузер может "смотреть вперед" и видеть следующий тег
<script>, а также инициировать запрос для этого внешнего файла script. - Поскольку внешние ресурсы
<script>блокируют ресурсы, официальный синтаксический анализ и выполнение страницы не могут продолжаться до тех пор, пока не будет извлечен и выполнен первый файл script. Браузер может смотреть вперед, чтобы узнать, нужно ли запускать загрузку любых других ресурсов. - Первый файл script завершает загрузку. Браузер выполняет это script.
- Второй файл script завершает загрузку. Браузер выполняет это script.
- В любой момент этого процесса, если любая из таблиц стилей заканчивает загрузку, они обрабатываются, как только они будут доступны.
- После обработки второго блока script выполняется разбор парсинга страниц. Теги
-
</head>и<body>анализируются. -
<button>button1</button>анализируется и добавляется в тело DOM. На данный момент браузер может выполнять частичную визуализацию. - Теги
<img>анализируются и запускаются для их внешних изображений. - Второй тег
<button>обрабатывается и может отображаться. - Браузер видит концевые теги, обозначающие конец страницы.
- В какой-то момент в будущем завершается загрузка и рендеринг изображений. В зависимости от изображений и браузера изображения, возможно, выполняли прогрессивный рендеринг при их загрузке.
Как уже отмечалось некоторыми другими, раздел временной шкалы на вкладке "Сеть" в инструментах разработчика Chrome может быть очень эффективным визуальным инструментом, показывающим, как работает загрузка различных компонентов страницы.
Чтобы проиллюстрировать, какая информация находится на вкладке "Сеть" в инструментах разработчика Chrome, вот скриншот от загрузки страницы StackOverflow. В барах справа показана временная шкала, когда сначала запрашивались различные ресурсы и когда они заканчивали загрузку.
В качестве другого ресурса этот ответ загрузить и выполнить порядок скриптов содержит подробное описание того, как/когда скрипты загружаются и включает в себя эффекты асинхронных и отсроченных атрибутов.