defer和 async的简单解释

574 阅读1分钟

defer和async用于外部加载js文件,两种加载方式都是异步加载。好处是优化DOM和script文件的加载速度。

defer和async的比较:

相同点:

加载script文件时不会阻塞文档DOM结构的渲染

当外部引入的js文件加杀跟着两个属性之后该文件中的document.write方法将 无法使用,(如果引入的文件中必须使用documennt.write方法就不要给外部引入文件加这两个属性)。

当给js文件加上这两个属性后会有onload事件的回调

允许不定义属性值仅仅使用属性名。

不同点:

defer是html4.0版本共定义的,二async是html5.0版本定义的,这将造成由于浏览器版本不同对其属性的支持程度也不同

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

这两个属性会有三种可能的组合:

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