让你轻松看懂defer和async

defer和async产生的原因

HTML 网页中，浏览器通过<script>标签加载 JavaScript 脚本。
<!-- 页面内嵌的脚本 -->
<script type="application/javascript">
  // module code
</script>

<!-- 外部脚本 -->
<script type="application/javascript" src="path/to/myModule.js">
</script>

由于浏览器脚本的默认语言是 JavaScript。
因此type="application/javascript"是可以省略。
默认情况下，浏览器是同步加载 JavaScript 脚本.
就是说渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。
如果是外部脚本，还必须加入脚本下载的时间。

如果脚本体积很大，下载和执行的时间就会很长。
因此造成浏览器堵塞，用户会感觉到浏览器“卡死”,用户体验不好
所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

defer和async的简单介绍

<script>标签上有defer或async属性，脚本就会异步加载。
渲染引擎遇到这一行命令，就会开始下载外部脚本.
但不会等它下载和执行，而是直接执行后面的命令。

defer与async的区别是[面试题]

defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；
async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。
一句话，defer是“渲染完再执行”，async是“下载完就执行”。
另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，
而多个async脚本是不能保证加载顺序的。

ES6中script标签module的作用

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

用代码来描述
<script type="module" src="./foo.js"></script>
<!-- 等同于 -->
<script type="module" src="./foo.js" defer></script>

如果网页有多个<script type="module">，它们会按照在页面出现的顺序依次执行。
<script>标签的async属性也可以打开，这时只要加载完成，
渲染引擎就会中断渲染立即执行。执行完成后，再恢复渲染。
<script type="module" src="./foo.js" async></script>
一旦使用了async属性，
<script type="module">就不会按照在页面出现的顺序执行，
而是只要该模块加载完成，就执行该模块。