Skip to content

Latest commit

 

History

History
29 lines (23 loc) · 1.54 KB

javascript.md

File metadata and controls

29 lines (23 loc) · 1.54 KB

Script tags

Script tags in HTML files will download, parse, and execute as soon they are encountered by the browser.

normal (<script src="index.js"></script>)

  • BLOCKING: blocks the browser parsing while they downloads and execute
  • EXECUTES: executes immediately after downloading (very bad for performance)
  • WHEN TO USE: when the script is critical (in situations where the JS is essential for the functionality of the page)

defer (<script defer src="index.js"></script>)

  • BLOCKING: does not block the browser parsing while it downloads
  • EXECUTES: executes once HTML parsing is complete
  • ORDER: always executes in the order in which the HTML parser discovers them
  • WHEN TO USE: when the script is non-critical and when order matters

async (<script async src="index.js"></script>)

  • BLOCKING: does not block the browser parsing while it downloads
  • EXECUTES: executes as soon as they finish downloading
  • ORDER: which means they can run in a different order
  • WHEN TO USE: when the script is non-critical and when order does not matter
  • NOTES: this could cause jank if the JS is big or complex because it could stop the functionality of your page as they execute (whereas defered scripts would execute after the page has loaded)

general notes

  • JS execution will always block the HTML parser, as well as other JS execution

images

Resources