浅谈script 的三种加载模式:默认加载、defer、async

众所周知，js是单线程的，默认情况下，当浏览器发现一个script标签的时候，浏览器就会停止Dom的解析，转而执行js脚本，如果此时网络很慢，或者该脚本里边存在一个非常耗时的程序，就会造成界面长时间没有加载出来，出现白屏的情况。

那么都有哪些脚本是默认同步加载的呢？

1.内联脚本

  <script>
      code...
  </script>  

2.使用src引入的脚本

  <script src='./index.js'>
  </script>

3.动态引入，但是依旧是内联脚本的形式

const script = document.createElement("script");
script.textContent = "code()";
document.body.appendChild(script);

那么如何让脚本不阻塞dom树的构建，让脚本异步执行呢？

浏览器为我们提供了以下几种方法

1.使用async或defer标记使用src方式引入的脚本

 <script defer或async src='./index.js'>
  </script>

注意：如果我们为内联（非src引入）的脚本声明async属性，该脚本依旧会同步执行。

  <script async>
      code...
  </script>  

2.动态且为src方式引入的脚本,浏览器会默认为我们开启async属性

const script = document.createElement("script");
script.src = "index.js";
document.body.appendChild(script);

defer和async的区别

1.defer按顺序执行

DOMContentLoaded 事件触发前按脚本书写顺序执行

2.async是谁先加载完谁先执行

没有顺序，就比谁快