async和defer

• 加载异步

  <script src="script.js"></script>
  没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

  <script async src="script.js"></script>
  有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

  <script defer src="script.js"></script>
  有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

• async和defer的作用是什么？有什么区别

没有async和defer的情况下：

浏览器加载时，加载CSS和图片时会是并发加载（如同一个域名加载两个文件），但在浏览器加载JS时会禁用并发加载，也就是只有当JS加载完成时CSS和图片才能加载。因此把JS放在顶部会产生白屏（无样式内容闪烁）的情况。

有defer的情况：

在进行开发时，开发环境很复杂会出现调整JS文件位置困难的情况。因此在使用defer后会让后续文档元素加载和js加载并行，但是需要把所有元素解析完成后js才会执行，这样的效果与把放在head中的js能够与放在body的尾部产生的作用是一样的，大大方便了开发。

有async的情况：

当使用async后，js文件的加载与其他元素的加载同样并行，因此也不会对其他文档元素的加载进行阻碍产生白屏。与defer不同的是async在使用后js一旦读到就会立即执行

- async和defer的相同点：

1. 加载文件时不阻塞页面渲染。
2. 对于inline的script无效。
3. 使用这两个属性的脚本中不能调用document.write方法。
4. 有脚本的onload的事件回调。

- async和defer的不同点：

1. html4.0中定义了defer，html5.0中定义了async。
2. async属性的脚本会在下载结束后立刻执行，同时会在window的load事件之前执行，所以就会出现顺序被打乱的情况；defer属性的脚本是在页面解析完成后，按照顺序执行，同时会在document的DOMContentLoaded之前执行。