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.