-
加载异步
<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的相同点：
- 加载文件时不阻塞页面渲染。
- 对于inline的script无效。
- 使用这两个属性的脚本中不能调用document.write方法。
- 有脚本的onload的事件回调。
- async和defer的不同点：
- html4.0中定义了defer，html5.0中定义了async。
- async属性的脚本会在下载结束后立刻执行，同时会在window的load事件之前执行，所以就会出现顺序被打乱的情况；defer属性的脚本是在页面解析完成后，按照顺序执行，同时会在document的DOMContentLoaded之前执行。
