Вопрос проверяет понимание порядка загрузки и выполнения скриптов в HTML-документе и их влияния на отрисовку страницы.
Когда браузер загружает HTML-страницу, он последовательно парсит (разбирает) её содержимое, строя DOM-дерево. Встречая обычный тег <script> без атрибутов async или defer, он немедленно приостанавливает процесс парсинга. Это критическое поведение, потому что скрипт может содержать команды, изменяющие DOM (например, document.write), и браузер должен обеспечить согласованное состояние дерева.
<script src="app.js">.src).Рассмотрим простую HTML-страницу:
<!DOCTYPE html>
<html>
<head>
<title>Пример</title>
<script src="heavy-script.js"></script>
</head>
<body>
<h1>Важный заголовок</h1>
<p>Этот текст появится с задержкой.</p>
</body>
</html>Пока браузер загружает и выполняет heavy-script.js, пользователь увидит пустой экран. Контент страницы (<h1>, <p>) не будет отрисован до завершения работы скрипта. Это приводит к плохому пользовательскому опыту, особенно при медленном соединении.
Такой подход необходим, если скрипту критически важно взаимодействовать с DOM-элементами, расположенными непосредственно перед ним, или если порядок выполнения нескольких скриптов строго задан. Однако в современной разработке для оптимизации производительности рекомендуется:
defer для скриптов, которым не нужно выполняться немедленно. Они загрузятся параллельно с парсингом, но выполнятся только после полного построения DOM, перед событием DOMContentLoaded.async для независимых скриптов (например, счётчиков аналитики), которые могут выполниться в любой момент после загрузки, не блокируя парсинг.</body>, чтобы основной контент успел отобразиться.Вывод: Обычная загрузка скрипта (без async/defer) блокирует парсинг страницы, что может серьёзно ухудшить воспринимаемую скорость загрузки. Используйте её осознанно, только когда требуется строгий порядок выполнения и немедленный доступ к DOM. В большинстве случаев для скриптов, работающих с DOM, предпочтительнее defer, а для независимых — async.