Разница между `script`, `script async` и `script defer`?

Поиск

script - отрисовка HTML блокируется, скрипт извлекается и выполняется немедленно, отрисовка HTML возобновляется после окончания выполнения скрипта.
script async - скрипт будет получен и обработан параллельно с отрисовкой HTML, его выполнение закончится как только это будет возможно (обычно до того, как закончилась отрисовка HTML). Используйте async тогда, когда скрипт не зависит от других скриптов на странице, например для аналитики.
script defer - скрипт будет получен параллельно с отрисовкой HTML, его выполнение произойдет после того, как вся страница будет загружена. Если таких скриптов несколько, то каждый из них будет исполнятся в том порядке, в котором они расположены в документе. Если скрипту нужен полностью распарсеный DOM, то атрибут defer обеспечит уверенность в том, что на момент отработки скрипта весь HTML отрисован. Нет особой разницы со скриптами, расположенными перед тегом body. Отложенный скрипт не должен содержать document.write.

Примечание: Атрибуты async и defer игнорируются, если у тега script нет атрибута src.

Пример использования атрибутов async и defer:

<!doctype html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
	<!-- Block HTML reading -->
	<script src="script1.js"></script>
	
	<!-- Execution with HTML reading -->
	<script src="script2.js" async></script>
	
	<!-- Execution after HTML is ready -->
	<script src="script3.js" defer></script>
  </body>
</html>

В этом примере скрипт script2.js будет загружен и выполнен асинхронно, т.е. без остановки загрузки страницы. Скрипт script3.js будет загружен асинхронно, но выполнен только после того, как страница будет полностью загружена.