script标签中的defer、async区别

async 该布尔属性指示浏览器是否在允许的情况下异步执行该脚本。该属性对于内联脚本无作用 (即没有src属性的脚本)。


defer 这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后,触发 DOMContentLoaded 事件前执行。如果缺少 src 属性(即内嵌脚本),该属性不应被使用,因为这种情况下它不起作用。对动态嵌入的脚本使用 `async=false` 来达到类似的效果。


当script标签中间有代码时,两个属性都不会起作用。


配图解释:

没有任何属性时,文档解析、网络读取、执行都是串行。

defer文档解析与网络读取并行,在文档解析后,DOMContentLoaded事件触发之前执行

async则没有任何限制,文档解析时网络读取文件,读取完后立即执行。


defer和async同时出现时,只会触发async,不会触发defer <?有疑问,暂时没有找到参考文档>


有资料说只有IE支持defer属性,是不正确的,现在好多浏览器都支持defer属性

详细兼容性请参考:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script


参考:

1、https://007sair.github.io/2018/02/05/script%E6%A0%87%E7%AD%BE%E4%B8%AD%E7%9A%84defer%E5%92%8Casync%E5%8C%BA%E5%88%AB/

2、https://segmentfault.com/q/1010000000640869



确认 取消
1条评论