07 Модуль - DOM. События -- 05 Процесс построения веб-страницы

Question 1

Когда браузер создает DOM, если он встречает тег script в HTML, он

Answer 1

должен выполнить его сразу.

Question 2

По умолчанию, чтобы выполнить скрипт, построение DOM

Answer 2

приостанавливается, и возобновляется только после того, как JavaScript-движок выполнил скрипт.

Question 3

Почему построение DOM приостановается?

Answer 3

Скрипты могут изменять как HTML, так и его продукт - DOM, добавляя узлы. Скрипты могут также запрашивать что-то о DOM, и если это происходит, когда DOM все еще строится, он может вернуть неожиданные результаты.

Question 4

Когда синтаксический анализатор попадает в тег сценария, конструкция DOM не может продолжаться до тех пор, пока JavaScript не завершит выполнение, и JavaScript не будет выполнен до тех пор, пока

Answer 4

CSS не будет загружен, проанализирован и не будет доступен CSSOM.

Question 5

Браузер показал беспорядочную страницу без CSS, а через несколько мгновений стилизованную, это называется

Answer 5

Flash of Unstyled Content.
Чтобы обойти эти проблемы, вы должны стремиться как можно быстрее доставить CSS. Помните правило «стили наверху, сценарии внизу»?

Question 6

Синхронные скрипты блокирующие парсер, это проблема. И не все скрипты одинаково важны для пользователей, например, для отслеживания и аналитики. Решение?

Answer 6

Асинхронная загрузка этих менее важных скриптов.

Question 7

defer и async - оба атрибута сообщают браузеру, что он может

Answer 7

продолжить разбор HTML при загрузке сценария в фоновом режиме, а затем выполнить скрипт после его загрузки. Таким образом, загрузка скриптов не блокирует конструкцию DOM и рендеринг страниц.

Question 8

Выполнение defer скриптов начинается

Answer 8

после завершения парсинга, но перед событием DOMContentLoaded. Это гарантирует, что скрипты будут выполняться в том порядке, в котором они отображаются в HTML, и не будут блокировать синтаксический анализатор.

Question 9

async выполняется

Answer 9

при первой возможности после завершения загрузки и перед событием загрузки окна. Это означает, что возможно скрипты не выполняются в том порядке, в котором они отображаются в HTML. Это также означает, что они могут прервать создание DOM.

Question 10

Асинхронные скрипты загружаются с

Answer 10

низким приоритетом. Они часто загружаются после всех других скриптов, не блокируя создание DOM.

Question 11

Атрибут defer загружается вместе с html DOM, но только фоном, и когда он загрузился, он ждет пока полностью загрузиться DOM и только после загрузки DOM’a он выполняется.

Answer 11

http://fecore.net.ua/books/m5ph3r-javascript/module-07/images/defer.png

Question 12

Атрибут async загружается вместе с html DOM, но только фоном, и когда он загрузился, он не ждет полной загрузки DOM’а, он сразу начинает выполняется, и когда он выполняется он блокирует загрузку DOM, получается что DOM начинается грузиться только после выполнения async скрипта.

Answer 12

http://fecore.net.ua/books/m5ph3r-javascript/module-07/images/async.png