script标签中的 defer 和 async 属性

<script src="myscript.js"></script>   // 没有defer和async属性时
 
<script src="myscript.js" defer></script>   // 有defer属性时
 
<script src="myscript.js" async></script>  // 有async属性时
 
<script src="myscript.js" async defer></script>  // 有async,defer属性时或者defer,async属性时

一、当script没有defer和async属性时

如果两个属性都没有（默认行为），脚本的下载和执行将会按照文档的先后顺序同步进行。当脚本下载和执行的时候，文档解析就会被阻塞，在脚本下载和执行完成之后文档才能往下继续进行解析。总之脚本的下载和执行都是按照文档的先后顺序进行。

二、当script 有defer属性时(等到文档解析完才开始执行)

defer 属性表示脚本按顺序被解析到时就开始下载，下载过程中文档继续进行解析，当文档全部解析完成之后便开始执行下载好的脚本，这相当于在 DOMContentLoaded 的监听事件内进行执行。虽然 defer 属性的脚本需要等到文档解析完才开始执行，但其执行是有顺序的(异步加载资源，在DOM渲染后之后再按顺序执行JS)。

三、当script 有async属性时(脚本下载完成后停止HTML解析，执行脚本，脚本解析完继续HTML解析)

async 属性表示脚本按顺序被解析到时就开始下载，下载过程中文档继续进行解析，当脚本下载完成后文档停止解析开始执行下载好的脚本，脚本执行完后继续解析文档。async 脚本由于网络等的影响将不会按照顺序执行(异步加载资源，且加载完JS资源立即执行，并不会按顺序，谁快谁先上)。

四、当script同时有async和defer属性时(执行效果和async一致)

执行效果和async一致，把这两个属性交换一下位置，看会不会有覆盖效果，结果发现也是和async一致的

综上，在webkit引擎下，建议的方式仍然是把综上，在

使用场景：

1.把带 defer 属性的脚本放在 中比无属性的脚本放在 之前要更好，因为浏览器在页面解析时可对带 defer 属性 的脚本进行下载。
3.如果脚本相互依赖，请使用 defer。
4.如果脚本是独立的，请使用 async。
5.如果 DOM 必须解析好才执行且执行函数没有放在 DOMContentLoaded 的监听器中，请使用 defer。