JavaScript中script标签async与defer的区别

async：与后续元素渲染异步执行，乱序执行，若js文件之间存在依赖关系，容易产生错误，只适用于完全没有依赖的文件，文档解析过程中异步下载，下载完成之后立即执行。

defer：（H5规范中，defer是有序执行的，但实际不一定是有序执行的）与后续渲染异步执行，延迟到界面文档解析完成之后执行，即为立即下载，延迟执行。所有执行均在DOMContentLoaded 事件触发之前完成。 

不带属性：加载到script立即下载并执行，阻塞后续渲染的执行。

最佳方案：外部引用文件放在</body>之前执行

对比图如下：

<script/>放在<head/>与<body/>中的区别？

区别：加载顺序的不同，在页面加载之前下载，HTML加载顺序是由上至下

<head/>：会在文档加载前加载结束。

<body/>：不能保证哪个先加载结束（文档？引用文件？）性能更优

注：内嵌的脚本也不要紧跟在<link>标签之后，否则会导致页面阻塞去等待样式表的下载。