Последовательность, в которой загружается HTML-страница?

Какова последовательность загрузки 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>

Что я знаю - (пожалуйста, поправьте меня, если я не прав)

Сначала загружается начальная секция

. а затем нагрузки на кузов.

Мои вопросы -
1. Загружается ли часть кузова только после того, как головная часть загружена полностью?
2. Полностью ли загружается css sheet1, а затем загружается только файл sheet2 и JS?

3. Загружаются ли файлы CSS параллельно? то же самое с файлами JS..? или файлы CSS и JS вместе загружаются параллельно?
4. Поскольку изображения HQ * являются большими файлами, требуется время для загрузки. загружается ли кнопка2 и отображается на странице только после полной загрузки HQ1 и HQ2?
5. Служит ли загрузка HQ1 и HQ2 параллельно или синхронно, что является первым HQ1, а затем HQ2?

Ответ 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. В барах справа показана временная шкала, когда сначала запрашивались различные ресурсы и когда они заканчивали загрузку.

В качестве другого ресурса этот ответ загрузить и выполнить порядок скриптов содержит подробное описание того, как/когда скрипты загружаются и включает в себя эффекты асинхронных и отсроченных атрибутов.

Ответ 2

Существует причина, по которой HTML-документы формируются в дереве heirachy, браузер (движок рендеринга), будет проходить через дерево разбора и добавления элементов по мере их нахождения, а затем переходит на следующий уровень.

поэтому HTML-страница рисуется сверху вниз:

Draw:
=========

-- <html>               
|      <head>
|          ...
|      </head>
|      <body>
|          <div>...</div>
|      </body>
-- </html>

Ответ 3

Чтобы быть ясным, не путайте заголовок/тело страницы HTML с заголовком/тегом запроса HTTP.

Верно, что заголовок запроса HTTP считывается первым, а тело второе, но все они получены в одном ответе HTTP.

Аналогично, ответ HTTP содержит всю страницу HTML (с тегами заголовка/тела).

Теперь, на ваш вопрос (ы):

Браузер читает страницу HTML по строкам сверху вниз (первая строка до последней строки). Поскольку браузер читает (ака разбора) HTML-страницу, он определяет, что ему нужны другие ресурсы (например, CSS, JS, JPG, GIF файлы и т.д.), И браузер запрашивает дополнительные запросы для получения этих ресурсов. Он делает это параллельно, если не указано иное.