🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

简述 `<script>` 标签中的 defer 和 async 属性

2018-12-18

回答

如果两个属性都没有(默认行为),脚本的下载和执行将会按照文档的先后顺序同步进行。当脚本下载和执行的时候,文档解析就会被阻塞,在脚本下载和执行完成之后文档才能往下继续进行解析。总之脚本的下载和执行都是按照文档的先后顺序进行。

defer 属性表示脚本按顺序被解析到时就开始下载,下载过程中文档继续进行解析,当文档全部解析完成之后便开始执行下载好的脚本,这相当于在 DOMContentLoaded 的监听事件内进行执行。虽然 defer 属性的脚本需要等到文档解析完才开始执行,但其执行是有顺序的。

async 属性表示脚本按顺序被解析到时就开始下载,下载过程中文档继续进行解析,当下载完成后文档停止解析开始执行下载好的脚本,脚本执行完后继续解析文档。async 脚本由于网络等的影响将不会按照顺序执行。

来个图帮助理解
215179843659da4801c6772_articlexpng

注意:两个属性都必须在脚本中含有 src 属性时才能进行使用,内联脚本不可以使用。如下所示:

<script src="myscript.js"></script>
<script src="myscript.js" defer></script>
<script src="myscript.js" async></script> 

加分回答

  • 把带 defer 属性的脚本放在 <head> 中比无属性的脚本放在 </body> 之前要更好,因为浏览器在页面解析时可对带 defer 属性的脚本进行下载。
  • 如果脚本相互依赖,请使用 defer
  • 如果脚本是独立的,请使用 async
  • 如果 DOM 必须解析好才执行且执行函数没有放在 DOMContentLoaded 的监听器中,请使用 defer

返回总目录

每天 30 秒


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步