网页加载流程
- 浏览器一边下载HTML网页，一边开始解析。
- 解析过程中，浏览器发现
<script>元素，就暂停解析，把网页渲染的控制权转交给JS引擎- 如果
script元素引用了外部脚本，就下载该脚本再执行，否则就直接执行代码- JS引擎执行完毕，控制权交还给渲染引擎，往下回复解析HTML代码
async属性（异步执行脚本）
表示遇到script标签，就开始下载脚本，但不能阻止页面其它动作；只对外部脚本文件有效。
所以，当给script元素，添加了async属性时，浏览器加载网页的流程变成了：
- 浏览器开始解析网页
- 解析过程中，浏览器发现带有
async属性的<script>元素- 浏览器继续往下解析HTML网页，同时并行下载
<script>标签中的外部脚本- 脚本下载完成后，浏览器将停止解析HTML网页，开始执行下载的脚本
- 脚本执行完毕，浏览器恢复解析HTML网页
defer属性（推迟执行脚本）
表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
所以，当给script元素，添加了defer属性时，浏览器加载网页的流程变成了：
- 浏览器开始解析HTML网页
- 解析过程中，浏览器发现带有
defer属性的<script>元素- 浏览器继续往下解析HTML网页，同时并行下载
<script>元素加载的外部文件- 浏览器完成解析HTML网页，此时再回过头执行已经下载完成的脚本
async和defer的区别：
脚本之间有依赖关系：使用
defer属性
脚本之间没有依赖关系：使用async属性
如果同时使用async和defer，则defer不起作用，浏览器行为由async属性决定。
