js中defer和async的区别

今天在学习JavaScript时候，H5中引入js文件时对script标签内的defer和async有些不太明白，所以查阅资料后做个笔记。

1.由上面的时序图可以看出来，当没有任何参数的的时候，js文件的加载和执行是和HTML元素解析互斥的，即当js脚本加载和执行后HTML才会继续解析。
2.当参数为async时，js脚本加载和HTML解析是同步进行的，js脚本加载完毕后会立即执行，执行脚本时会中断HTML文档解析。
3.当参数为defer时，HTML文档解析时会加载js脚本，当HTML文档解析完成后才会执行js脚本。
++++
HTML5规范要求脚本执行应该按照脚本出现的先后顺序执行，但实际情况下，延迟脚本不一定按照先后顺序执行，也不一定会在 DOMContentLoaded 事件触发前执行，因此最好只 包含一个延迟脚本！！！async的js在下载完后会立即执行（因此脚本在代码中的顺序并不是脚本所执行的先后顺序，有可能后面出现的脚本先执行）。当js脚本执行顺序不符合自己预期的顺序时，可以通过监听需要先执行的js文件的onload事件实现依赖。