script标签中defer和async的区别?

defer

当浏览器遇到带有defer属性的script标签时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析HTML结构，一旦网络请求之后发现HTML结构还没有解析完，浏览器不会停止对HTML的解析也不会执行JS代码，而是等待HTML解析完成后再执行JS代码,如果存在defer script标签，浏览器（IE9以下除外）会保证他们按照在HTML中出现的顺序执行，不会破坏JS脚本之间的依赖关系。

async

当浏览器遇到带有async属性的script标签时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析HTML结构，一旦网络请求之后发现HTML结构还没有解析完，浏览器会停止对HTML的解析，先让JS引擎执行JS代码，执行完在解析HTML结构，当然，如果在 JS 脚本请求回来之前，HTML 已经解析完毕了，那就啥事没有，立即执行 JS 代码，所以async是不可控的，因为执行时间是不确定的，你如果在异步脚本中获取DOM元素，有可能获取到，也有可能获取不到。而且如果存在多个async的时候，他们的执行时间也是不确定的，完全依赖于网络，谁先到执行谁。

总结：defer要等到整个页面再内存中正常渲染结束（DOM结构完全生成，以及其他脚本执行完），才会执行;async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。若有多个defer脚本，则按他们在页面中出现的顺序执行，而async基本不保证加载顺序