Script标签的几个注意点

记录一下最近在研究JavaScript的模块化时发现的几个注意点。

图例：

默认情况下，HTML中的Script标签是阻塞的，加载的顺序由上而下，如果一个Script标签由于网络等原因，下载速度较慢，则DOM结构的渲染以及其他Script标签的下载将会被阻塞。

DOM的解析将在Script标签被下载并且执行之后才会恢复。

1 2	<script src="http://localhost/a.js"></script> <script src="http://localhost/b.js"></script>

Script标签在设置了async属性的情况下，会异步下载文件，但是下载完成后会立刻执行，并且打断DOM的渲染，知道执行完成之后才会继续渲染。

1 2	<script src="http://localhost/a.js" async></script> <script src="http://localhost/b.js" async></script>

async有一个最大的缺点，先加载先执行，假设上述代码中b.js依赖于a.js，但b.js先加载完成，则其先被执行，从而导致b.js无法找到a.js中的依赖。

在设置了defer的情况下，也会异步下载文件，但是下载完成后并不会立刻执行，也不会打断DOM渲染，而是等到渲染完成之后，才会执行下载的文件，多个文件defer加载的脚本文件也会依照既定的顺序被执行。

1 2	<script src="http://localhost/a.js" defer></script> <script src="http://localhost/b.js" defer></script>