消息关闭
    暂无新消息!

defer和async的适用场景?

问题作者 : xib小女2017-09-06发布

在script标签中加上defer属性效果是不是等同于把script放在</body>前,async异步加载js文件,加载完成后立即执行,那么async会不会在dom加载完之前就执行了,如果是这样的话,那么它的适用场景是什么


2个回答

︿ 1

defer 和 async 在网络下载这块儿是一样的,相较于 HTML 解析都是异步的。不同点在于脚本下载完之后何时执行,defer是在HTML完全解析后再最后执行,async是下载完立即执行

︿ 1

1.defer的延迟加载确实十分类似把script放在</body>前,不过不能说是等同,因为defer属性的script外部文件的下载是与html解析线程同时进行的,而最后的执行时放在html解析的最后面,所以说效果类似,但是区别在于节省了外部script下载的时间。

2.async是加载完成后立即执行,所以会在dom加载完之前执行,在async执行完之后,html再继续解析。

3.我理解的两者的适应场景其实都主要在于“异步下载”这个点,所以当有多个外部脚本时可以节省很多下载时间,两者的区别体现在因为多个带async属性的外部脚本下载后的执行顺序不确定,所以适合没有相互依赖关系的多个外部脚本使用,而多个defer属性的外部脚本一般来说会按照顺序进行执行。

4.还有一些具体的可以参考下之前sf里面的一篇博客和一个问答,说得都挺好
浅谈script标签的defer和async
defer和async的区别