По каким соображения разработчики придумали блокировать построение DOM, когда браузер натыкается на скрипт в коде программы?

Question

Димон @Dimon123

Новичок, разбираюсь в веб-программировании

JavaScript

По каким соображения разработчики придумали блокировать построение DOM, когда браузер натыкается на скрипт в коде программы?

Привет.
Зачем браузер останавливает синтаксический анализ и построение дерева разбора DOM, когда при анализе встречает код джаваскрипт? Например, имеется HTML-файл, с ним связан CSS-файл и JavaScript-файл. Получается (если я правильно понимаю) такая схема загрузки, как на рисунке.

Если взять, например, HTML и CSS, то тут логика понятная. Анализируется HTML код (строит дерево разбора DOM), браузер встречает код CSS и параллельно начинает анализ кода стилей (строит дерево разбора стилей CSS), при этом начало отображения придерживается до тех пор, пока дерево стилей не будет готово - чтобы пользователь не увидел голый некрасивый каркас HTML без стилей. Начинается отображение и параллельная подгрузка неуспевших загрузиться картинок.

Вопрос задан более трёх лет назад
204 просмотра

3 комментария

Подписаться 1 Оценить 3 комментария

Решения вопроса 1

6 комментариев

Димон @Dimon123 Автор вопроса

спасибо за ответ

Написано более трёх лет назад
Димон @Dimon123 Автор вопроса

мне не понятно, опишите, пожалуйста, подробней фразу "Единственная причина - возможность использования скриптом document.write()"

Написано более трёх лет назад
Дмитрий Беляев @bingo347 Куратор тега JavaScript
Dimon123: попробуйте запустить пример:
<!DOCTYPE html> <html><body> <script type="text/javascript"> document.write('<p>1</p><p>2</p><p>3</p>'); </script> </body></html>

Конечно document.write лучше не использовать, но тем не менее он есть, что позволяет изменить структуру начального документа
Написано более трёх лет назад
Димон @Dimon123 Автор вопроса

документрайт вставил сразу после себя в документ новые элементы (как и ожидалось) 123, они отобразились при запуске кода

Написано более трёх лет назад
Димон @Dimon123 Автор вопроса

то есть, браузер тормозит дальнейшее построение дерева DOM ИМЕННО ДЛЯ ТОГО, чтобы документрайт НЕ ЗАТЕР все при отработке и в чистом окне вывел 1 2 3, а именно ВСТАВИЛ 1 2 3 между какими-то элементами на странице?

Написано более трёх лет назад
Дмитрий Беляев @bingo347 Куратор тега JavaScript

Dimon123: если по простому то да
если быть точнее, document.write пишет в поток (stream) документа, поэтому браузер останавливает запись в этот поток из потока http-сокета

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 3

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как не вызывать получения данных из redux много раз?
- 1 подписчик
- 4 часа назад
- 27 просмотров
0

ответов
JavaScript

Простой
Почему нет доступа к данным из callback?
- 1 подписчик
- 22 часа назад
- 83 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как одновременно получить данные из callback и передать их в callback?
- 1 подписчик
- вчера
- 80 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как передать какие-либо данные в godot через браузер?
- 1 подписчик
- 13 февр.
- 73 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Какой алгоритм можно применить при проверки числа на простое ли оно?
- 1 подписчик
- 12 февр.
- 1755 просмотров
3

ответа
JavaScript

+2 ещё

Средний
Как запретить оверлею загораживать отдельно взятый элемент? Как выбить/поднять/отменить дочерний элемент из контекста наложения?
- 2 подписчика
- 12 февр.
- 206 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Какой фреймворк подойдет для задачи редактирования онлайн таблчки?
- 3 подписчика
- 12 февр.
- 536 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как для мобильных сделать правильную нумерацию?
- 1 подписчик
- 12 февр.
- 60 просмотров
1

ответ
JavaScript

Простой
Как найти связанные элементы объекта?
- 1 подписчик
- 12 февр.
- 107 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как вшить игру на godot в существующий сайт?
- 1 подписчик
- 11 февр.
- 85 просмотров
2

ответа
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

Senior Frontend (JavaScript) разработчик

Vital Partners

от 350 000 до 420 000 ₽

Надо найти рабочую связку ustd/uzs и рассказать как ее проворачивать

16 февр. 2025, в 17:15

1000 руб./за проект

Docker на развертывание Django + React

16 февр. 2025, в 15:54

2500 руб./за проект

Написание нейросети на Python или C++ для анализа ЭКГ сигналов

16 февр. 2025, в 11:06

15000 руб./за проект

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

Answer 1 · 2016-06-02 23:09:38

Дмитрий Беляев @bingo347 Куратор тега JavaScript

Crazy on performance...

Единственная причина - возможность использования скриптом document.write()
Вставляйте скрипты в конец документа и будет Вам счастье

Ответ написан более трёх лет назад

6 комментариев

Answer 2 · 2016-06-02 23:07:40

Петр @petermzg

Самый лучший программист

Потому что есть метод
document.write(str);

Ответ написан более трёх лет назад

1 комментарий

Answer 3 · 2016-06-02 23:21:04

Алгоритм синтаксического анализа

Как уже говорилось в предыдущих разделах, синтаксический анализ кода HTML невозможно выполнить с помощью стандартных нисходящих или восходящих анализаторов.

Ниже перечислены причины этого.
Язык имеет "щадящий" характер.
В браузерах заложены механизмы обработки некоторых частых ошибок в коде HTML.
Цикл синтаксического анализа характеризуется возможностью повторного вхождения. Исходный документ обычно не меняется в процессе анализа, однако в случае HTML теги скрипта, содержащие document.write, могут добавлять новые токены, поэтому исходный код может меняться.
Так как стандартные анализаторы не подходят для HTML, браузеры создают собственные анализаторы.

Алгоритм синтаксического анализа подробно описан в спецификации HTML5.

Принципы работы современных веб-браузеров

Answer 4 · 2016-06-02 23:30:03

Для асинхронной загрузки JS придумали параметр "async".
А вы уже обязуетесь не делать в скрипте document.write[ln](...).

По каким соображения разработчики придумали блокировать построение DOM, когда браузер натыкается на скрипт в коде программы?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт