阅读 5348

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代码的合并和拆分,然后再根据页面需要使用这两个属性。

文章分类
前端
文章标签