图片来自网络

默认方式

浏览器会并行加载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