Quiz Questions

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

Importance
High
Quiz Topics
HTMLJAVASCRIPT

<script> tags are used to include JavaScript on a web page. The async and defer attributes are used to change how/when the loading and execution of the script happens.

Plain <script>

For normal <script> tags without any async or defer, when they are encountered, HTML parsing is blocked, the script is fetched and executed immediately. HTML parsing resumes after the script is executed.

<script async>

In <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) and it will not necessarily be executed in the order in which it appears in the HTML document. Use async when the script is independent of any other scripts on the page, for example, analytics.

<script defer>

In <script defer>, the script will be fetched in parallel to HTML parsing and executed when the documented has been fully parsed. If there are multiple of them, each deferred script is executed in the order they appeared in the HTML 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. A deferred script must not contain document.write().

Notes

Generally, the async attribute should be used for scripts that are not critical to the initial rendering of the page and do not depend on each other, while the defer attribute should be used for scripts that are critical to the initial rendering of the page or that depend on each other.

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

References