Describe the difference between <script>, <script async> and <script defer>.

Describe the difference between <script>, <script async> and <script defer>.

<script> - HTML parsing is blocked, the script is fetched and executed immediately, HTML parsing resumes after the script is executed.
<script async> - The script will be fetched in parallel to HTML parsing and executed as soon as it is available (potentially before HTML parsing completes).

Use async when the script is independent of any other scripts on the page, for example, analytics.

Describe the difference between <script>, <script async> and <script defer>. (Cont...)

<script defer> - The script will be fetched in parallel to HTML parsing and executed when the page has finished parsing. If there are multiple of them, each deferred script is executed in the order they were encountered in the document. If a script relies on a fully-parsed DOM, the defer attribute will be useful in ensuring that the HTML is fully parsed before executing.

There's not much difference in putting a normal <script> at the end of <body>. A deferred script must not contain document.write.

Describe the difference between <script>, <script async> and <script defer>. (Cont...)

Note: The async and defer attributes are ignored for scripts that have no src attribute.