Ի՞նչ տարբերություն կա <script>, <script async> և <script defer> թեգերի միջև։

Ստանդարտ <script> նշանը կանգնեցնում է HTML-ի վերլուծությունը, բեռնում է սցենարը և կատարում այն, ապա վերլուծությունը շարունակվում է:

<script async> բեռնում է սցենարը ասինխրոն, երբ վերլուծությունը շարունակվում է։ Սցենարը անմիջապես կատարվում է բեռնելուց հետո։ Կատարումի կարգը երաշխավորված չէ։

<script defer> բեռնում է սցենարը ասինխրոն, երբ վերլուծությունը շարունակվում է։ Սցենարը կատարվում է միայն վերլուծության ավարտից հետո, բայց նախքան 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-ից հետո -->