В HTML 5 появилась загрузка js-скриптов с атрибутом defer и async. Асинхронная загрузка async делает так, что скрипт будет загружен и сразу выполнен без оглядки на загрузку страницы. Поэтому async используется редко.
Намного чаще используется defer: он указывает браузеру скачать файл, но дождаться события DOMContentLoaded (то есть загрузки всей страницы и скриптов). Важный момент в том, что defer-скрипт сработает до события DOMContentLoaded — это что-то вроде его инициализации.
Теперь поговорим об Alpine.js, поскольку для неё как раз и используется defer-загрузка в секции HEAD.
<html> <head> ... <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script> </head> <body> <div x-data @click="...">Click my</div> </body> </html>
Директивы Alpine — по сути псевдокод, то есть это не нативный js-код, который выполняет браузер, а код, который выполняется через Alpine. Поэтому defer-загрузка прекрасно работает — здесь просто нет ни очереди скриптов, ни завязки на функции Alpine, как это было с jQuery.
Практика