Skip to content

Instantly share code, notes, and snippets.

@jonathanKingston
Created January 24, 2016 12:43
Show Gist options
  • Save jonathanKingston/b2a08bea7ccfd75f324a to your computer and use it in GitHub Desktop.
Save jonathanKingston/b2a08bea7ccfd75f324a to your computer and use it in GitHub Desktop.
Scripting HTML parser diagram longdesc (https://html.spec.whatwg.org/images/asyncdefer.svg)

Comparing the proposed loading order of <script type="module"> with the current script tag loading methods. Showing a comparison of HTML parsing, script loading and executing scripts.

  • Classic (<script>) loading blocks the parser to fetch the code and then blocks again execute the code then goes back to parsing the HTML.
  • Defer (<script defer>) will not block the parsing to trigger the fetch but it will happen at the same time, the execution of the script will happen after the parsing is complete.
  • Async (<script async>) will not block the parsing to trigger the fetch but it will block to execute the script, after that has happened it will continue the parsing.
  • Module (<script type="module">) will behave like defer in that it will fetch in parallel to parsing but also it's dependency tree is fetched at the same time in parallel. After the parsing has completed it will execute the scripts.
  • Async module (<script type="module" async>) will behave like async in that it will fetch the files in the dependency tree at the same time of the parsing then block the parser to execute once the tree has been fetched.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment