Ответ
Добавление <script> в <head> без async или defer блокирует парсинг HTML до загрузки и выполнения скрипта. Это приводит к:
- Задержке отображения страницы – браузер ждёт завершения скрипта, прежде чем отрендерить контент.
- Плохому UX – пользователь видит белый экран дольше.
- Снижению производительности – особенно критично для медленных сетей или тяжёлых скриптов.
Пример:
<head>
<script src="heavy-script.js"></script> <!-- Блокирует рендеринг -->
</head>
<body>
<!-- Контент появится только после выполнения heavy-script.js -->
</body>Решение:
- Используйте
asyncдля независимых скриптов (загружаются асинхронно, выполняются сразу после загрузки). - Используйте
deferдля скриптов, зависящих от DOM (выполняются после парсинга HTML). - Переносите скрипты перед закрывающим
</body>, если они не критичны для начального рендера.