js异步加载之defer、async、type=module

script标签可以使用defer、asyc以及type=module来异步加载js，这三者之间的去区别如下：

defer

• 如果script标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染；
• 如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script；
• defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行。

async

• async的设置，会使得script脚本异步的加载并在允许的情况下异步执行该脚本。
• async的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行，执行脚本时页面停止渲染，执行完成后继续页面渲染。
• DOMContentLoaded事件的触发并不受async脚本加载的影响。

type=module

带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。

<!-- 等到整个页面渲染完，再执行模块脚本 -->
<script type="module" src="foo.js"></script>
<!-- 等同于 -->
<script type="module" src="foo.js" defer></script>

标签的async属性也可以打开，这时只要加载完成，渲染引擎就会中断渲染立即执行。执行完成后，再恢复渲染。

<!-- js下载完成就立即执行，中断页面渲染 -->
<script type="module" src="foo.js" async></script>