На стадии парсинга HTML, если скрипты указаны вверху страницы, блокируют ли они дальнейшую загрузку страницы или нет?

Первый рендеринг в браузере может блокироваться из-за синхронной загрузки и выполнения JavaScript и CSS.

Что блокирует рендеринг:

• CSS: браузер должен загрузить и обработать все CSS-файлы перед тем, как отобразить страницу, чтобы избежать «мигания» без стилей (FOUC).
• JavaScript: скрипты, подключённые без атрибутов async или defer, блокируют парсинг HTML, так как браузер должен загрузить и выполнить их сразу.

Что можно сделать:

• Для CSS:

  • Минимизировать и объединять файлы.
  • Использовать media атрибуты для отложенной загрузки стилей, не критичных для первого экрана.
  • Встраивать критический CSS inline в <head>, чтобы ускорить первый рендер.

• Для JavaScript:

  • Добавлять атрибуты async или defer к тегам <script>, чтобы загрузка и выполнение не блокировали парсинг HTML.
  • Переносить скрипты в конец <body>.
  • Делать ленивую загрузку скриптов, которые не нужны сразу.

Пример использования defer:

<script src="script.js" defer></script>

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