博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
async与defer
阅读量:4519 次
发布时间:2019-06-08

本文共 1193 字,大约阅读时间需要 3 分钟。

<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

你可能感兴趣的文章
类实例化(new)
查看>>
我是怎么定义微服务平台?
查看>>
C语言中多维数组的内存分配和释放(malloc与free)(转)
查看>>
python random
查看>>
互联网技术
查看>>
input输入框只允许输入数字/ 数字+小数点/ 文字+字母/ 等解决方法
查看>>
【翻译】西川善司「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密,前篇(2)...
查看>>
函数名、闭包及迭代器
查看>>
mysql 5.6 参数详解
查看>>
求旋转数组的最小元素
查看>>
jQuery ajax error函数(交互错误信息的获取)
查看>>
Gson解析Json数组
查看>>
Lintcode: Fast Power
查看>>
Pocket Gem OA: Log Parser
查看>>
枚举也能直接转换为对应的数值输出
查看>>
angularjs1-7,供应商
查看>>
BitSet
查看>>
Spring常用注解,自动扫描装配Bean
查看>>
(转载)深入理解WeakHashmap
查看>>
JAVA中的数组
查看>>