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
• 浏览器兼容性

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

结语

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

1. 如果async为true，那么脚本在下载完成后异步执行。
2. 如果async为false，defer为true，那么脚本会在页面解析完毕之后执行。
3. 如果async和defer都为false，那么脚本会在页面解析中，停止页面解析，立刻下载并且执行。

最后给一点个人的建议，无论使用defer还是async属性，都需要首先将页面中的js文件进行整理，哪些文件之间有依赖性，哪些文件可以延迟加载等等，做好js代码的合并和拆分，然后再根据页面需要使用这两个属性。