script 的属性 async defer 区别

参考:《javascript高级程序设计》第三版

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

  • async:可选。立即下载脚本。只对外部脚本文件有效。下载完立即执行。典型的例子:Google Analytics。
  • defer:可选。立即下载脚本。只对外部脚本文件有效。延迟执行。HTML5规范要求脚本按照他们出现的先后顺序执行,脚本会先于DOMContentLoaded事件。在现实中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行。

async,defer,同时有且都支持的话,async 会生效而 defer 会被忽略。

从实用角度来说呢,首先把所有脚本都丢到 </body> 之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。