Каква е разликата между етикетите <script>, <script async> и <script defer>?

Стандартният <script> спира анализа на HTML, зарежда скрипта и го изпълнява, след което анализът продължава.

<script async> зарежда скрипта асинхронно, докато анализът на HTML продължава. Скриптът се изпълнява веднага след зареждане. Поръчката на изпълнение не е гарантирана.

<script defer> зарежда скрипта асинхронно, докато анализът на HTML продължава. Скриптът се изпълнява само след завършване на анализа на HTML, но преди събитието DOMContentLoaded. Поръчката на изпълнение на скриптовете с defer се запазва според тяхното появяване в HTML.

Сравнителна таблица:

Атрибут	Анализ на HTML по време на зареждане на скрипта	Изпълнение на скрипта	Запазване на реда на изпълнение
Няма	Спира	Веднага след зареждане	Да
async	Продължава	Веднага след зареждане (може да прекъсне анализа)	Не
defer	Продължава	След завършване на анализа на HTML	Да

Пример:

<!-- Обикновен скрипт - блокира анализа -->
<script src="script1.js"></script>

<!-- Асинхронен скрипт - не блокира анализа, изпълнява се веднага след зареждане -->
<script src="script2.js" async></script>

<!-- Отложен скрипт - не блокира анализа, изпълнява се след анализа на HTML -->
<script src="script3.js" defer></script>
<script src="script4.js" defer></script> <!-- Ще се изпълни след script3.js -->