defer 与 async

时间:2022-02-06 22:25:33

defer

  • HTML4.01定义的
  • 只适用于外部脚本(IE4~7会支持内嵌脚本的defer属性)
  • 告诉浏览器立即下载,延迟执行,脚本会延迟到整个页面全部解析完毕之后才运行
  • HTML5规范要求脚本按照他们出现的先后顺序执行,第一个延迟脚本先于第二个延迟脚本执行,这两个脚本会先于DOMContentLoaded事件执行,而在现实浏览器中,延迟脚本不一定会按照顺序执行,也不一定在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。

async

  • HTML5定义的
  • 只适用于外部脚本
  • 与defer不同的是,标记为async的脚本不保证按照指定他们的先手顺序执行,因此确保多个脚本之间互不依赖非常重要,指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议脚本不要在加载期间修改DOM。
  • 指定了async属性的脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行