Как атрибуты defer и async влияют на загрузку и выполнение скриптов, и как ещё можно избежать блокировки парсинга HTML скриптами?

Для внешних классических скриптов defer загружает параллельно и выполняет после разбора HTML в порядке документа; async выполняет по готовности без гарантии порядка. Загрузка и выполнение — разные этапы.

defer-скрипты выполняются до DOMContentLoaded, async может прервать парсинг для исполнения. Модульные скрипты по умолчанию имеют отложенное поведение. Ещё можно перенести некритичный код к концу документа или загрузить по действию пользователя; это не устраняет стоимость самого исполнения JavaScript.