Фарқияти корӣ дар коркарди режимҳо (async, defer ё type) теги <script>?

<script> бе атрибут

• HTML то тоҷир мешавад то ба <script> тег.
• Таҳлил кардани HTML дар вақти пайдоиши <script> тег боздошта мешавад.
• Боркунии скрипт идома мекунад.
• Иҷрои скрипт сурат мегирад.
• Таҳлил кардани HTML пас аз иҷрои скрипт идома меёбад.

<script async>

• HTML ҳамзамон бо боркунии скрипт таҳлил мешавад.
• Таҳлил кардани HTML дар вақти анҷоми боркунии скрипт боздошта мешавад.
• Скрипт иҷро мешавад.
• Таҳлил кардани HTML пас аз иҷрои скрипт идома меёбад.
• тартиби иҷрои скриптҳои async кафолат дода намешавад, вобаста ба суръати боркунӣ.

<script defer>

• HTML ҳамзамон бо боркунии скрипт таҳлил мешавад.
• Скрипт пас аз анҷоми таҳлили HTML, аммо пеш аз рӯйдоди DOMContentLoaded иҷро мешавад.
• тартиби иҷрои скриптҳои defer кафолат дода мешавад, мувофиқ ба тартиби ҷойгиршавии онҳо дар HTML.
• рафтор монанд ба <script> ки пеш аз теги пӯшидаи </body> гузошта шудааст.

<script type="module"> (барои ECMAScript Modules)

• Ҳамчун <script defer> кор мекунад ба таври пешфарз (ифтихоршудаи пас аз таҳлил, нигоҳ доштани тартиб).
• Мумкин аст бо атрибути async истифода шавад.
• Импорт/экспорт модулҳоро дастгирӣ мекунад. Ҳамсозии як минтақаи алоҳидаи назорат.

Атрибут	Боркунии скрипт	Иҷрои скрипт	Блокиравии таҳлили HTML	Тартиби иҷро
Надошта	Блокиранг	Блокиранг	Бале	Нигоҳ дошта мешавад
async	Наблокиранг (параллелӣ)	Наблокиранг (пас аз боркунӣ)	Не	Гарант дода намешавад
defer	Наблокиранг (параллелӣ)	Наблокиранг (пас аз таҳлили HTML)	Не	Нигоҳ дошта мешавад
type="module"	Наблокиранг (параллелӣ)	Наблокиранг (пас аз таҳлили HTML, ба таври пешфарз)	Не	Нигоҳ дошта мешавад (ба таври пешфарз)

// Мисоли скрипти оддӣ
console.log('Скрипти оддӣ');

// Мисоли скрипти асинхронӣ
console.log('Скрипти асинхронӣ');

// Мисоли скрипти бо таъхир
console.log('Таъхиршуда');

// Мисоли модул
import { someFunction } from './module.js';
someFunction();
console.log('Скрипти модул');