რა განსხვავებაა <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-ის შემდეგ -->