首页 > 网页制作 > html5

浅谈HTML5 defer和async的区别

admin html5 2022-02-06 13:54:43 HTML5   defer   async"

在HTML页面中插入Javascript的主要方法,就是使用

浏览器会立即加载并执行指定的脚本,“立即”指在渲染该script标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
 
二、当浏览器解析到script脚本,有async时:
 

浏览器会立即下载脚本,但不妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和main.js的加载与执行并行进行(异步)。
 
async不保证按照脚本出现的先后顺序执行,因此,确保两者之前互不依赖非常重要,指定async属性的目的是不让页面等待两个脚本的下载和执行,从而异步加载页面其他内容,建议异步脚本不要在加载期间修改DOM。
 
异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。支持异步脚本的浏览器有Firefox 3.6、Safari 5 和Chrome。
 
三、当浏览器解析到script脚本,有defer时:
 

表示脚本会被延迟到文档完全被解析和显示之后再执行,加载后续文档元素的过程将和main.js的加载并行进行(异步)。HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。
 
IE4~IE7还支持对嵌入脚本的defer属性,但IE8以及之后的版本则完全支持HTML5规定的行为。
 
IE4,Firefox 3.5,Safari 5和Chrome是最早支持defer属性的浏览器。其他浏览器胡忽略这个属性,像平常一样处理脚本,为此,把延迟脚本放在页面底部仍然是最佳选择。
 
蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。
 
此图告诉我们以下几个要点:
 
defer 和 async 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)

它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的

关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用

async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行

仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google Analytics

以上这篇浅谈HTML5 defer和async的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持潘少俊衡。

原文地址:https://www.iwyv.com/d/files/20220206/11wfjwaz0x0.html

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/html5/77230.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持