defer和async 属性

1. defer

  立即下载,延迟执行。

  HTML5 规范要求脚本按照他们出现的顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会优先于 DOMContentLoaded 事件触发前执行;

  在现实当中,延迟脚本并不一定会按照顺序执行,也不一定在 DOMCotentLoaded 事件出发前执行,一次最好只包含一个延迟脚本;

  使用范围: 

    只适用于外部脚本文件;HTML5 已经规定,因此支持HTML5的实现会忽略给嵌入脚本设置的defer属性

  PS: 在XHTML文档中,要把defer属性设置为 defer="defer"

2. async

  立即下载,异步执行,异步加载页面其他内容
  乱序执行,不能保证执行顺序,所以要确保脚本文件不相互依赖;建议异步脚本不要在加载期间修改 DOM

  异步脚本一定会在load事件之前执行,但可能会在 DOMContentLoaded 事件触发之前或者之后执行。

  使用范围: 

    只适用于外部脚本文件;HTML5 已经规定,因此支持HTML5的实现会忽略给嵌入脚本设置的defer属性

  PS: 在XHTML文档中,要把defer属性设置为 defer="defer"

猜你喜欢

转载自www.cnblogs.com/frontend-coder/p/10647717.html