script中defer和async的区别

定义

defer：此布尔属性被设置为向浏览器指示脚本在文档被解析后执行。
  async：设置此布尔属性，以指示浏览器若是可能的话，应异步执行脚本。复制代码

1. 对于defer，咱们能够认为是将外链的js放在了页面底部。js的加载不会阻塞页面的渲染和资源的加载。不过defer会按照本来的js的顺序执行，因此若是先后有依赖关系的js能够放心使用。

2. 对于async，这个是html5中新增的属性，它的做用是可以异步的加载和执行脚本，不由于加载脚本而阻塞页面的加载。一旦加载到就会马上执行在有async的状况下，js一旦下载好了就会执行，因此颇有可能不是按照本来的顺序来执行的。若是js先后有依赖性，用async，就颇有可能出错。

区别

相同点：

• 加载文件时不阻塞页面渲染
• 对于inline的script（内联脚本）无效
• 使用这两个属性的脚本中不能调用document.write方法
• 有脚本的onload的事件回调

不一样点：

• html的版本html4.0中定义了defer；html5.0中定义了async
• 浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
async attribute	(Supported)	3.6 (1.9.2)	10	—	(Supported)
defer attribute	(Supported)	3.5 (1.9.1)	4	—	(Supported)

• 执行时刻
  每个async属性的脚本都在它下载结束以后马上执行，同时会在window的load事件以前执行。因此就有可能出现脚本执行顺序被打乱的状况；每个defer属性的脚本都是在页面解析完毕以后，按照本来的顺序执行，同时会在document的DOMContentLoaded以前执行。

结语

简单的来讲，使用这两个属性会有三种可能的状况

1. 若是async为true，那么脚本在下载完成后异步执行。
2. 若是async为false，defer为true，那么脚本会在页面解析完毕以后执行。
3. 若是async和defer都为false，那么脚本会在页面解析中，中止页面解析，马上下载而且执行。

最后给一点我的的建议，不管使用defer仍是async属性，都须要首先将页面中的js文件进行整理，哪些文件之间有依赖性，哪些文件能够延迟加载等等，作好js代码的合并和拆分，而后再根据页面须要使用这两个属性。