რა განსხვავებაა <script> ტეგის რეჟიმების (async, defer ან type) მუშაობაში?

<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 მოდულებისთვის)

• მუშავდება როგორც <script defer>, როგორც წესი (დაგვიანებული შესრულება პარალელურად, წესის დაცვით).
• შეიძლება გამოყენებულ იქნას async-თან ერთად.
• მხარს უჭერს მოდულების იმპორტსა და ექსპორტს. ქმნის ცალკეულ სკოპს.

ატრიბუტი	ჩატვირთვა	შესრულება	HTML-ის პარსინგის ბლოკირება	წესის დაცვა
არ არის	ბლოკირებადი	ბლოკირებადი	დიახ	შენარჩუნებულია
async	არ ბლოკირებადი (პარალელური)	არ ბლოკირებადი (ჩატვირთვის შემდეგ)	არა	გარანტია არ არის
defer	არ ბლოკირებადი (პარალელური)	არ ბლოკირებადი (HTML-ის პარსინგის შემდეგ)	არა	შენარჩუნებულია
type="module"	არ ბლოკირებადი (პარალელური)	არ ბლოკირებადი (HTML-ის პარსინგის შემდეგ, როგორც წესი)	არა	შენარჩუნებულია (როგორც წესი)

// მარტივი სკრიპტის მაგალითი
console.log('სადამარტივო სკრიპტი');

// ასინქრონული სკრიპტის მაგალითი
console.log('ასინქრონული სკრიპტი');

// გადადებული სკრიპტის მაგალითი
console.log('გადადებული სკრიპტი');

// მოდულის მაგალითი
import { someFunction } from './module.js';
someFunction();
console.log('მოდულის სკრიპტი');