美文网首页
关于script的defer和async属性

关于script的defer和async属性

作者: Llane00 | 来源:发表于2017-03-18 10:07 被阅读0次

    defer 延迟脚本:

    例子:<script defer src="script.js"></script>

    1.脚本会延迟到整个页面都解析完毕后,DOMContentLoaded 事件触发之前运行。
    因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。

    2.加载后续文档元素的过程将和 script.js 的加载并行进行(异步)

    3.当有多个延迟脚本时,HTML5规范要求脚本按照它们出现的前后顺序执行,靠前的延迟脚本会先执行。
    但现实中,延迟脚本不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。

    4.defer属性只适用于外部脚本。

    async 异步脚本:

    例子:<script async src="script.js"></script>

    1.加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)

    2.指定async属性的目的是不让页面等待此脚本的下载和执行,从而异步加载页面其他内容。为此,建议不要在加载期间修改DOM

    3.标记为async的脚本并不保证按照指定它们的先后顺序执行。因此有多个异步脚本时确保两者之间互不依赖。

    4.async属性只适用于外部脚本

    参考资料:《JavaScript高级程序设计(第3版)》2.1.2以及2.1.3

    相关文章

      网友评论

          本文标题:关于script的defer和async属性

          本文链接:https://www.haomeiwen.com/subject/lclunttx.html