让你轻松看懂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">就不会按照在页面出现的顺序执行， 而是只要该模块加载完成，就执行该模块。