<script>, <script async> va <script defer> teglari orasidagi farq nima?

Standart <script> tegi HTMLni tahlil qilishni to‘xtatadi, skriptni yuklab olib, uni bajaradi, so‘ngra tahlil davom etadi.

<script async> asinxron tarzda skriptni yuklaydi, HTML tahlili davom etayotgan paytda. Skript yuklab olingandan so‘ng darhol bajariladi. Bajarilish tartibi kafolatlanmagan.

<script defer> asinxron tarzda skriptni yuklaydi, HTML tahlili davom etayotgan paytda. Skript faqat HTML tahlili tugagach, lekin DOMContentLoaded voqeasi yuz berishidan oldin bajariladi. defer bilan yuklangan skriptlarning bajarilish tartibi HTMLda paydo bo‘lish tartibiga muvofiq saqlanadi.

Taqqoslash jadvali:

Atribut	HTML tahlili skript yuklanayotgan paytda	Skript bajarilishi	Bajarilish tartibini saqlash
Yo‘q	To‘xtatadi	Yuklashdan keyin darhol	Ha
async	Davom etadi	Yuklashdan keyin darhol (tahlilni to‘xtatishi mumkin)	Yo‘q
defer	Davom etadi	HTML tahlili tugagach	Ha

Misol:

<!-- Oddiy skript - tahlilni to‘xtatadi -->
<script src="script1.js"></script>

<!-- Asinxron skript - tahlilni to‘xtatmaydi, yuklashdan keyin darhol bajariladi -->
<script src="script2.js" async></script>

<!-- Kechiktirilgan skript - tahlilni to‘xtatmaydi, HTML tahlilidan so‘ng bajariladi -->
<script src="script3.js" defer></script>
<script src="script4.js" defer></script> <!-- script3.js dan keyin bajariladi -->