Explain the role of deferred scripts in JavaScript

Answer:

The defer attribute is a boolean attribute. When present, it specifies that the script is executed when the page has finished parsing.

As the document parser goes through the page, this is what occurs -

The defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed.

The file can be downloaded while the HTML document is still parsing. However, even if the file is fully downloaded long before the document is finished parsing, the script is not executed until the parsing is complete.

By default, the parsing of the HTML code, during page loading, is paused until the script has not stopped executing. It means, if the server is slow or the script is particularly heavy, then the webpage is displayed with a delay. While using Deferred, scripts delays execution of the script till the time HTML parser is running. This reduces the loading time of web pages and they get displayed faster.

Syntax:
<script defer></script>

Example:
<p><script>
//do stuff (runs first)
</script>

<script defer>
//do stuff, but defer it (runs last)
</script>

<script>
//do more stuff (runs second)
</script></p>