По каким соображения разработчики придумали блокировать построение 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 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 5 часов назад
- 43 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- вчера
- 111 просмотров
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 92 просмотра
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- 21 дек.
- 1712 просмотров
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- 21 дек.
- 59 просмотров
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 85 просмотров
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 102 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 214 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 108 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 95 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Web приложение на php+js

23 дек. 2024, в 16:55

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

Автоматизация приемки товара на склад в "Мой склад"

23 дек. 2024, в 16:50

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

Cоздание 3d сцены с симуляцией пызырьков

23 дек. 2024, в 16:13

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

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

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, когда браузер натыкается на скрипт в коде программы?

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

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

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