Блокируют ли скрипты и стили загрузку и отрисовку страницы?

Да, но по-разному: CSS блокирует отрисовку, а синхронный скрипт блокирует парсинг HTML. Атрибуты async и defer позволяют скрипту не блокировать парсер.

Стили

Браузер не рисует страницу, пока не построил CSSOM, поэтому <link rel="stylesheet"> блокирует рендеринг. Парсинг HTML при этом продолжается, но пикселей до загрузки CSS не будет. Это защищает от «вспышки» неоформленного контента.

Стили под другое устройство не блокируют рендеринг, если медиазапрос не подходит:

<link rel="stylesheet" href="print.css" media="print">

Скрипты

Обычный <script src="app.js"> останавливает парсинг HTML: браузер скачивает и выполняет скрипт, потому что он может изменить DOM (document.write). Если перед ним есть стили, скрипт ждёт и их: ему может понадобиться CSSOM.

async и defer

• нет — Загрузка: блокирует парсер; Выполнение: сразу после загрузки
• `async` — Загрузка: параллельно с парсингом; Выполнение: сразу после загрузки, порядок не гарантирован
• `defer` — Загрузка: параллельно с парсингом; Выполнение: после завершения парсинга, по порядку

type="module" ведёт себя как defer.

Как ускорить страницу

• Скрипты подключать с defer (или async для независимых).
• Критический CSS вставить в <head>, остальные стили подгружать с media или через preload.
• Скрипты размещать в конце <body>, если нельзя использовать defer.

Коротко для собеседования

CSS блокирует рендеринг, обычный скрипт блокирует парсинг HTML и ждёт CSS. defer выполняет скрипты по порядку после парсинга, async — по готовности.