2018-12-18 回答 如果两个属性都没有(默认行为),脚本的下载和执行将会按照文档的先后顺序同步进行。当脚本下载和执行的时候,文档解析就会被阻塞,在脚本下载和执行完成之后文档才能往下继续进行解析。总之脚本的下载和执行都是按照文档的先后顺序进行。 defer 属性表示脚本按顺序被解析到时就开始下载,下载过程中文档继 ..

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

本贴最后更新于 303 天前,其中的信息可能已经渤澥桑田

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> 

加分回答

返回总目录

每天 30 秒

  • 30Seconds

    精选的常见前端问题集,帮助您踏踏实实走好每一步。

    英文原文请看 30-seconds

    290 引用 • 290 回帖 • 6 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    83 引用 • 263 回帖 • 190 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    227 引用 • 1247 回帖 • 310 关注
8 回帖
请输入回帖内容...
  • PeterChu 1

    原来如此,之前老碰见 JS 报错的时候,还奇怪有些东西为什么存在却提示 undefined,又学到了😄

    1 回复
  • Vanessa

    😄

  • Eddie

    其实正常 js 放在靠近上面基本都不会有大问题。

    1 回复
  • Vanessa

    嗯,这样只是让在解析的时候还可以继续下载

    1 回复
  • Eddie

    我上面本来打了放在 靠近 </ 'body> 结束元素上面,突然发现 <'/ body' > 这样的不显示啊。。。

    1 回复
  • Vanessa

    </body> 不显示啥?

    1 回复
  • Eddie 1 评论

    为什么你能显示 HTML 标签🙃,我打了显示不出来。

    1 回复
    我用了行内代码块
    Vanessa
  • 88250

    这个时候就显示出 Markdown 程序员的专业性了。

    https://hacpai.com/guide/markdown

请输入回帖内容 ...