Для предотвращения блокировки отрисовки страницы и обеспечения доступа к элементам DOM сразу после их загрузки.
При подключении скриптов в <head> или в начале <body> без атрибутов async или defer, браузер приостанавливает парсинг HTML и отрисовку страницы до тех пор, пока скрипт не будет загружен и выполнен. Это замедляет видимую производительность сайта.
Подключение в конце <body> гарантирует, что DOM-дерево уже полностью сформировано на момент выполнения скрипта, позволяя напрямую взаимодействовать с элементами без необходимости использовать обработчики событий типа DOMContentLoaded или load только для доступа к элементам.
Атрибуты async и defer являются современными альтернативами и предлагают более гибкие варианты загрузки скриптов, не блокируя парсинг HTML:
async: Скрипт загружается асинхронно и выполняется сразу после загрузки, не дожидаясь полной загрузки DOM. Порядок выполнения асинхронных скриптов не гарантируется.defer: Скрипт загружается асинхронно и выполняется после полного парсинга HTML, но до события DOMContentLoaded. defer скрипты выполняются в порядке их появления в разметке.