当前位置: 首页 > article >正文

HTML 的 script 标签中 defer 和 async 的区别

defer 和 async 都英语控制脚本的加载和执行,都是一部加载外部的 JS 脚本文件,两者都不会阻塞 HTML 的解析。

绿色代表 HTML 解析,蓝色代表 JS 脚本网络加载时间,红色是 JS 脚本执行时间。

defer 会等 DOM 加载完之后才执行,async 则是脚本一直加载完就立即执行。

<script src="lib.js" defer></script>
<script src="main.js" defer></script>

defer 使用场景主要是确保 DOM 完全加载和多个脚本相互依赖的情况,比如确保上述代码中两个脚本按顺序加载。虽然 js 本来就是从上往下执行,但加上 defer 更严谨,可以阻止页面渲染的阻塞、网络延迟、加载时间不同而导致执行顺序的改变。 

async 的使用场景,比如想广告内容,不需要等整个页面加载好就跳出来,还有线上考试,网速慢导致试卷还没加载好,但计时器可能就已经开始计时了。

 


http://www.kler.cn/a/556770.html

相关文章:

  • 中国游戏厂商出海拉美市场策略及收单方式
  • Windows10配置C++版本的Kafka,并进行发布和订阅测试
  • LeetCode2595
  • 【Spring Bean如何保证并发安全?】
  • 华为动态路由-OSPF-综合案例
  • 客户关系管理系统(源码+文档+演示+讲解)
  • 计算机专业知识【深入理解 IP 地址与子网掩码:从 /27 到不同 CIDR 表示】
  • FPGA DSP:Vivado 中带有 DDS 的 FIR 滤波器
  • adb shell setprop获取日志
  • 解锁外观模式:Java 编程中的优雅架构之道
  • 【HeadFirst系列之HeadFirst设计模式】第6天之单件模式:独一无二的对象,如何优雅实现?
  • eBPF驱动的实时内核安全防护体系:构建零日漏洞免疫的云原生基础设施
  • Git介绍和使用
  • 使用爬虫获得亚马逊按关键字搜索商品的实战指南
  • qt:输入控件操作
  • Android Coil3缩略图、默认占位图placeholder、error加载错误显示,Kotlin(1)
  • 力扣的第34题 在排序数组中查找元素的第一个和最后一个位置
  • 设计模式教程:迭代器模式(Iterator Pattern)
  • 日期类(完全讲解版)
  • 【深度学习】手写数字识别任务