Different ways to load JavaScript in HTML

Table of contents

No heading

No headings in the article.

Regular Script Loading Inside of the head tag

  • Browser fetches and executes the script first before parsing the HTML body.

  • An error might occur here when you're manipulating the DOM because script is executed first and DOM doesn't exist yet.


Regular Script Loading at the end of the tag

  • The Script will be fetched and executed when the HTML is parsed completely.


Async Script Loading

  • Fetches the script asynchronously while the HTML is being parsed and immediately executes it when the script has been loaded completely.


Defer Script Loading

  • The script is being fetched asynchronously and will only be executed when the HTML is parsed completely.