Браузер отличается от рендеринга с различным расположением скрипта и тега ссылки

Question

Я пытаюсь понять, когда именно HTML отображается на экране в браузере.

Я прочитал этот SO- ответ и попробовал несколько вариантов использования, и я заметил что-то, что не вписывается в модель, указанную в ссылке,
также я не могу найти последовательную модель ума для наблюдения.

Какой порядок рендеринга в браузере соответствует обсуждаемым случаям?

---

Случай А: Образ-А

1. Когда анализатор HTML достигает M1, отображается M1.
2. Затем синтаксический анализатор достигает тега скрипта, ожидает загрузки файла js и анализирует его.
3. Затем парсер достигает M3, отображается M3.

Случай A соответствует порядку, описанному в большинстве ответов. Huray!!! Давайте двигаться дальше.

Случай B: Изображение-B

1. Анализатор HTML достигает M1, M1 не отображается, как в случае A
2. HTML-парсер достигает тега ссылки, он ждет загрузки css и парсера.
3. Отображаются M1 и M2, поэтому он ждал загрузки таблицы стилей перед рендерингом M1.
4. Затем синтаксический анализатор достигает тега скрипта, ожидает загрузки файла js и анализирует его.
5. Затем парсер достигает M3, отображается M3.

Так, Case-B показывает, что он не рендерил M1, он ждал загрузки CSS, прежде чем рендерить его.Поэтому, возможно, визуализатору необходимо знать CSS перед рендерингом.

Дело:C Изображение C

Таким образом, из случая B мы предположили, что может потребоваться знать CSS.
Давайте посмотрим на случай C:

1. HTML-парсер достигает M1, отображается M1. Он не должен был отображаться, поскольку, как мы видели в случае B, он должен был ждать загрузки css.
2. Теперь парсер достигает скрипта, он ждет загрузки js и парсера.
3. M2, M3 отображаются

---

Изменить: Предлагаемая модель ума, которая объясняет вышеупомянутое поведение..(но требует пересмотра / уточнения)

1. Script не является тегом блокировки рендерера
2. link тег блокировки рендерера
3. Учитывая, что рендер и HTML-парсер являются двумя потоками.
4. Синтаксический анализатор HTML может отправлять данные для рендеринга.
5. Синтаксический анализатор HTML может отправлять сигнал блока рендереру..блоковому рендереру для рендеринга любого html, который не был обработан хотя бы один раз.
6. HTML-парсер может отправлять сигнал разблокировки для рендерера... чтобы разблокировать рендерер от рендеринга любого HTML, который не был обработан один раз.

С помощью приведенной выше модели мы можем объяснить CASE B и CASE C:
СЛУЧАЙ B Объяснение:

1. HTML-парсер достигает M1, M1 отправляется рендереру.
2. HTML-парсер достигает тега Link, парсер посылает сигнал блокирования рендереру.
3. Рендерер, прежде чем он может отрендерить M1, получил сигнал блокировки и, следовательно, M1 не отображается.
4. Анализатор HTML завершает разбор (загрузку) тега ссылки и отправляет сигнал разблокировки для средства визуализации, после получения сигнала разблокировки он отображает M1.
5. HTML-парсер достигает M2, M2 отправляется рендереру.
6. HTML-синтаксический анализатор достигает тега Script, поскольку тег script не является тегом блокировки рендерера, рендер может рендерить html.
7. Анализатор HTML завершает разбор тега скрипта (загрузка).
8. HTML-парсер достигает M3, M3 отправляется рендереру.

Точно так же мы можем запустить CASE C в сухом режиме, и он отлично вписывается в модель выше.

Моя модель правильная или с ней что-то не так?

Answer 1

Вы почти правы. За исключением того, что это проще - рендерер пассивен и не получает "сигнал блокировки". Он не рендерится (обновляет отображение, чтобы отразить dom-дерево), пока кто-то не попросит об этом

1. Ваш HTML неверен - вы не можете поставить <link rel=...> в теле. (Живой HTML 4.2.4)

2. Как вы уже поняли, таблица стилей является ресурсом, блокирующим рендеринг - она ​​предотвращает рендеринг контента, в отличие от скрипта, который приостанавливает и рендерит проанализированный контент.

Вот как я это объясню:

Дело Б: M1 - stylesheet - M2 - script - M3

1. Браузер получает HTML. M1 входит в дерево DOM. M1 еще не отображается, рендереру не было предложено работать.
2. загружает таблицу стилей. (в действительности это предотвращает рендеринг M1)
3. таблица стилей готова. М1 по-прежнему не отображается. (еще два шага)
4. М2 входит в дерево DOM. М1 и М2 пока не отображаются.
5. скрипт запускает рендеринг, отображая M1 и M2, а затем загружает.
6. Сценарий выполнен. Ничего не изменится (как бы это ни касалось дела).
7. M3 входит в дерево DOM, пока не отображается.
8. Документ готов, страница отрисована, поэтому отображается M3.

Эти поведения являются преднамеренными. Когда-то js работал медленно, а запуск сценариев занимал много времени, тогда как таблицы стилей были (и остаются) важны для скрытия элементов по умолчанию. Время могло измениться, но вряд ли это поведение изменится.

Дело С: M1 - script - M2 - link - M3

1. Браузер получает HTML. M1 входит в дерево DOM. М1 пока не отображается.
2. Скрипт запускает рендер, отображая M1, а затем загружается.
3. Сценарий выполнен. Ничего не меняется.
4. М2 входит в дерево DOM. Это еще не отображается.
5. загружает таблицу стилей, фактически блокируя M2.
6. таблица стилей готова. М2 по-прежнему не отображается.
7. M3 входит в дерево DOM, пока не отображается.
8. Документ готов, страница отображается, M2 и M3 выводятся на экран.

Фактический процесс отображения, с точки зрения потоков, очень сложен, и в некотором смысле сильно зависит от браузера. Например, DOM не является потокобезопасным. Подумай, что это значит.

Для простоты вы можете представить обработку браузера как данные и события, проходящие между различными модулями. Вот некоторые подсистемы рендеринга Firefox: