<script> | HTML Element

What is script 🤔..💭

script is an HTML element, which is used to embed executable code, or refer as javascript code.

This element support multiple attributes, but here we will explore only two async and defer

• defer : This boolean attribute is set to indicate to a browser, that the script will start downloading in parallel with document parsing, but it will only start executing after the the document content is parsed but before DOMContentLoaded is fired.

Deferred scripts keep their relative order, just like regular scripts.

Also it will prevent DOMContentLoaded from firing until defer script is downloaded and finished executing.

• async : This attribute is set to indicate the browser, that it will start fetching in parallel to parsing, and will start executing as soon as it's available.

DOMContentLoaded and async are independent. If async script is long and taking time to download and document is parsed then DOMContentLoaded will start it's execution.

Example:

Comments

[Sachin]

Nice summary. In the programming world, we love working examples or recipes. Do you agree? I would rather follow the age-old advice - "Show, don't tell". Why don't you develop a write-up backed up by working example code/use cases to highlight the point?

[Kaamkiya]

This is a pretty good way to get started on DEV! Why don't you write about some more features of the <script> element, like type and crossorigin?