Loading <script> in HTML

1 For Defer:

Defer has the priority which depend on your loading ordering. it means it’s will be loaded by your writing ordering.

2 For Async:

It will be excused imminently once script file is loaded. but if you use “defer”, the script will be excused after the html parser completed.

3 For Module:

Module scripts are deferred by default. As such, there is no need to add defer to your <script type="module"> tags! Not only does the download for the main module happen in parallel with HTML parsing, the same goes for all the dependency modules.

loading priority

The summary of html loading step

1. 解析HTML结构
2. 加载外部的脚本和样式文件
3. 解析并执行脚本代码
4. 执行$(function(){})内对应代码
5. 加载图片等二进制资源
6. 页面加载完毕，执行window.onload