浏览器渲染逻辑

• 浏览器下载html网页，边下载边解析渲染
• 解析过程中发现script标签
• 网页停止解析，把网页渲染控制权交给javascript引擎
• 如果<script>标签加载了外部脚本，就开始下载外部脚本，如果不是加载外部脚本，就直接执行
• 下载、执行完毕，控制权还给网页渲染引擎，继续下载解析html网页，解析并渲染网页
  在这个过程中，如果需要加载的外部脚本非常大，或者因为网速原因加载缓慢，则会造成浏览器不渲染或者空白，出现假死的现象。

async: 异步加载

只适用于加载外部脚本，加载过程如下

• 浏览器下载html网页，边下载边解析渲染
• 解析过程中发现async属性的script标签
• 网页继续下载解析，同时启动javascript标签开始下载外部脚本
• 脚本下载完成，浏览器暂停解析html网页，执行下载好的脚本
• 脚本执行完成，继续解析html网页
  优点：一定程度上解决了阻塞浏览器渲染html的问题
  缺点：不清楚脚本加载完成的顺序，也就不知道哪一个脚本先执行；同时如果外部脚本报严重级错误，或者脚本代码陷入死循环，则同样会浏览器渲染崩溃或者陷入假死

defer：延迟加载

延迟执行js脚本，直至网页渲染完成

• 浏览器下载html网页，边下载边解析
• 解析过程中发现defer属性的script标签
• 网页继续下载解析，同时启动javascript标签开始下载外部脚本
• 网页渲染完成，执行下载的js脚本
  DOM渲染完成，才会执行js脚本