请选择 进入手机版 | 继续访问电脑版

VueJs 3 前端开发学习

 找回密码
 加入学习
搜索
热搜: 活动 交友 discuz
查看: 189|回复: 0

[前端] 说说script 标签中的defer 和 async 异同点?

[复制链接]

23

主题

25

帖子

113

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
113
发表于 2021-7-21 15:08:57 | 显示全部楼层 |阅读模式
defer

这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此,在script元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。

HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件执行。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoad时间触发前执行,因此最好只包含一个延迟脚本。

对于不支持的浏览器,如safari,并不会延迟执行,还是会阻塞浏览器渲染。

async

这个属性与defer类似,都用于改变处理脚本的行为。同样与defer类似,async只适用于外部脚本文件,并告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照它们的先后顺序执行。

第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。

总结

async 和 defer 虽然都是异步的,不过还有一些差异,使用 async 标志的脚本文件一旦加载完成,会立即执行;而使用了 defer 标记的脚本文件,需要在 DOMContentLoaded 事件之前执行。

可以再扩展一下:link preload也可以用于js提前加载,和上述两者的区别?还有应用场景上的建议


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入学习

本版积分规则

QQ|Archiver|手机版|小黑屋|vue3

GMT+8, 2021-10-16 22:03 , Processed in 0.044959 second(s), 30 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表