script标签中defer和async属性的区别

本文介绍了HTML中script标签的三种使用方式:无属性时的阻塞加载与执行、async属性实现的异步加载与执行及defer属性实现的异步加载与延迟执行,并解释了它们在网页渲染过程中的作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

script标签存在两个属性,defer和async,因此script标签的使用分为三种情况:
  1.<script src="example.js"></script>
   没有defer或async属性,浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前,不等待后续加载的文档元素,读到就开始加载和执行,此举会阻塞后续文档的加载;
  2.<script async src="example.js"></script>
     有了async属性,表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的,即异步执行;
  3.<script defer src="example.js"></script>
         有了defer属性,加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步),js脚本的执行需要等到文档所有元素解析完成之后,DOMContentLoaded事件触发执行之前

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值