script加载顺序(async和defer的区别)

默认方式

浏览器会并行加载script, 但是执行是书写的顺序，假如script1执行未完毕，就不会开始执行script2,虽然script2已经加载完。
而且这种方式会阻碍script标签后面其余元素的渲染，直到script1执行完毕才会渲染后面的dom

<script src='./script1.js'></script><div>after scrpit1</div><script src='./script2.js'></script><div>after scrpit2</div>

async方式

这种方式不会阻碍script标签后面其余元素的渲染，谁加载快谁先执行

<script async src='./script1.js'></script><div>after scrpit1</div><script async src='./script2.js'></script><div>after scrpit2</div>

• 测试用例：使用node服务，将script1请求的响应时间控制比script2长
• 测试结果：
  1. script2开始执行 1576223742526
  2. script2执行完毕 1576223744794
  3. script1开始执行 1576223744795
  4. script1开始执行 1576223747009

defer方式

这种方式不会阻碍script标签后面其余元素的渲染，会按照书写书序执行.

<script defer src='./script1.js'></script><div>after scrpit1</div><script defer src='./script2.js'></script><div>after scrpit2</div>

• 测试用例：使用node服务，将script1请求的响应时间控制比script2长
• 测试结果：
  1. script1开始执行 1576224918596
  2. script1开始执行 1576224920828
  3. script2开始执行 1576224920829
  4. script2执行完毕 1576224923093