async与defer

2019-02-17 01:48:49来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

<script>元素的几种常见属性:

  async  异步加载,立即下载,不应妨碍页面其他操作,标记为 async 的异步脚本并不保证按照指定的先后顺序执行,因此异步脚本不应该在加载期间修改DOM,异步脚本一定会在页面的 load 事件前执行,不一定在 DOMContentLoaded 事件前后触发,js有依赖性时,用async很容易出错,async 是无序执行,自身加载完就会执行;

    DOMContentLoaded 事件于window的onload事件不同:

        onload事件是UI事件,是window对象的onload,当页面完全加载后(包括所有的图片、JS文件、CSS文件等外部资源),就会触发window的onload事件

        DOMContentLoaded事件是HTML5事件,本来是document对象的事件,会冒泡到window对象,形成了完整DOM树之后就会触发(不理会图片、JS文件、CSS文件或其它资源是否已经下载完毕)

  defer 延迟脚本,异步加载,立即下载,但脚本会延迟到整个页面都解析完毕后再运行,HTML5规范要求按照出现的前后顺序执行,并且会先于 DOMContentLoaded 事件触发前执行,现实当中 defer 脚本不一定按照顺序执行,也不一定会先于DOMContentLoaded事件前执行,因此最好只包含一个延迟脚本,defer 是有序执行

    async与defer区别

        相同点: 都是异步加载,不阻塞页面渲染;都可以只使用属性名,不定义属性值;都只对外部脚本适用(IE7之前针对嵌入式脚本使用defer,IE8+只支持外部脚本);

        不同点: async 会在加载完成后立即执行,因此它是无序执行,但一定会在window的onload事件之前执行,DOMContentLoaded事件前后不确定;

                       defer 会等到整个页面解析完后再执行,一般会按照顺序执行,会先于DOMContentLoaded事件触发前执行;

    JS加载执行顺序

        如果没有async和defer属性,那么浏览器会立即执行当前JS脚本阻塞后面的脚本;

        如果有async属性,那么浏览器加载它会与加载其它资源并行进行,异步加载,它自身加载完毕后立马执行;

        如果有defer属性,那么浏览器加载它也会与其它资源并行进行,异步加载,该脚本会被延迟到整个页面全部解析完毕后再执行;

        DOMContentLoaded先于onload事件触发;

  type 可以看做为language(已经弃用)的替代属性,该脚本语言的MIME类型,默认为text/javascript;

  src 要执行代码的外部文件;

<noscript>元素  只有在浏览器不支持脚本,或者支持脚本但被禁用时显示;

  


原文链接:https://www.cnblogs.com/a-qiang/p/10369911.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js坚持不懈之12:var b = {a:1};

下一篇:js 学习之路10:try异常处理和第一个js小程序