<head>
<script async src="/scripts.js"></script>
</head><body>?
</body>, если разместить их в шапке браузер будет тянуть их и пока не скачает не отрендерит html. Проблема решается атрибутом async, но теряется последовательность и тут приходит на помощь defer он отложит загрузку скриптов и в тоже время сохранит последовательность (но не включит асинхронность). async defer вкупе не работают. Если указывают async, а рядом defer то это лишь просто fallback атрибу для браузеров не поддерживающих async.
Простой
Средний