面试官:说一下script 标签中 defer(推迟) 和 async(异步) 的区别

本文介绍了HTML中script标签的defer和async属性,如何影响脚本的下载和执行,以及它们在DOM加载、DOMContentLoaded和load事件中的行为。defer确保脚本延迟至页面解析完毕后执行,而async允许脚本异步加载,可能乱序但保证在load事件前执行。

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

从极迷处识迷,则到处醒;将难放怀一放,则万境宽。——《小窗幽记·集醒篇》 

译:在最易令人迷惑的地方识破迷惑,那么无处不是清醒的状态;将最难以放下心怀的事放下,那么到处都是宽广的路。

开始

将Javascript插入HTML的主要方法是使用script元素,

外部引入——通过src属性指定外部JavaScript文件链接

内部嵌入——直接在HTML文档内使用<script></script>标签对引入

<script>标签包含了两个特殊的属性:defer与async,

async:属性可选。表示应该立即开始下载脚本,但不能阻止其他页面动作,比如下载资源或等待其他脚本加载。只对外部脚本有效

defer:属性可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。在IE7及更早的版本中,对行内脚本也可以指定这个属性。

——JavaScript高级程序设计

如果没有 defer 和 async 属性,浏览器会立即加载并执行相应的外部脚本,“立即”指的是在渲染该 script 标签之下的(下面的、下文的、紧接着的、紧跟着的、后续的)文档元素之前,也就是说不等待载入后续的文档元素,读到脚本就加载并执行这样就阻塞了后续文档的加载

推迟执行脚本 defer(延迟、推迟)


HTML 4.01 为<script>元素定义了一个叫 defer 的属性。这个属性表示脚本在执行的时候不会改变页面的结构。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此,在<script>元素上
设置 defer 属性,相当于告诉浏览器立即下载,但延迟执行。

<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML Pa
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值