README.md

Javascript 各种类型的加载与执行顺序

1. script src + defer

<script src="xx" defer></script>

是否阻塞parse: 不阻塞
执行时机：parse结束后待js文件全部加载完成后，按照script出现的顺序执行，全部执行完触发DOMContentLoaded事件

2. script type=module + src

<script type=module src='xx'></script>

同1

3. script type=module + 代码块

<script type='module'>
  code
</script>

同1,虽然代码已经在本地，还是会在下个时间点的下个时间点执行

4. script src

<script src="xx"></script>

是否阻塞parse: 阻塞, 停止parse，但是会触发preLoad
执行时机：停止parse，等待js文件加载完成后，如果前面没有css文件加载，立即执行js，恢复parse;如果前面有css文件加载,则等待css加载完毕，解析css完成后，立即执行js，恢复parse。preLoad 的css 的加载不会影响到js

5. script src + async

<script src="xx" async></script>

是否阻塞parse: 不阻塞, 继续parse
执行时机：js文件加载完成后，下一个时间点执行js(相当于setTimout(fn, 0))

6. script 代码块, 前面没有css文件在加载

<script>
  code
</script>

是否阻塞parse: 不阻塞, 执行完代码继续parse
执行时机：立即执行js，执行完继续parse

7. script 代码块, 前面有css文件在加载

<script>
  code
</script>

是否阻塞parse: 阻塞, 同4，停止parse，但是会触发preLoad
执行时机：待css文件加载完毕，解析完css后，立即执行js，执行完继续parse

8. 动态插入的script标签

  document.append(script)

同5,动态标签不受defer，async，type='module'影响，全部async

9. script type=module + defer

<script type=module defer></script>

同5，async优先级高于defer

10. script async + defer

<script src='xxx' async defer></script>

同5

11. script 代码块 + defer

<script defer>
  code
</script>

script代码块不支持 defer,同6或7

12. script 代码块 + async

<script async>
  code
</script>

script代码块不支持 async,同6或7

13. script 代码块 + src

<script src='xxx'>
  code
</script>

忽略代码块中的code，优先src