【HTML】defer 和 async 属性在 script 标签中分别有什么作用?
需要这两个属性的原因?
首先我们要知道的是,浏览器在解析 HTML 的过程中,遇到了 script
元素是不能继续构建 DOM 树的。
- 它会停止解析构建,首先去下载 js 代码,并且执行 js 的脚本;
- 只有在等到 js 脚本执行结束之后,才会继续解析 html,构建 DOM 树。
那为什么要这样做呢?
- 因为 js 的作用之一就是操作 DOM,并且可以修改 DOM;
- 如果等到 DOM 树构建完成并且渲染后再去执行 js,就会造成严重的回流和重绘,影响页面性能;
- 所以,在遇到
script
标签的时候,浏览器采取了先加载执行后构建 DOM 树的方案。
虽然是解决了回流和重绘的问题,但这又产生了新的问题!(解决一个问题产生了新的问题😂)
在现在的网页开发模式中(Vue、React),往往 js 脚本比 HTML 结构更“重”,需要加载和处理的时间更长。
这样就会导致页面的解析阻塞(在脚本完成下载、执行之前,用户在界面上什么都看不到)。
为了解决上面的问题,script
元素给我们提供了两个属性来处理:defer
和 async
defer 的作用
defer 翻译过来就是延迟的意思
defer 属性告诉浏览器不要等待脚本下载,而是继续解析 HTML、构建 DOM Tree。
- 脚本会又浏览器来进行下载,但是不会阻塞 DOMTree 的构建过程;
- 如果脚本提前下载好了,它会等待 DOM Tree 构建完成,在
DOMContentLoaded
事件之前执行 defer 中的代码。
下面举个例子:
我们创建了一个 defer.js 文件并在脚本执行的时候添加了 defer 属性,最后我们可以看到 DOMContentLoaded 会等待 defer 中的代码先执行完成。
另外我们要注意的是,多个 defer 的脚本是可以保持顺序执行的。
从某种角度来说,defer 是可以提高页面性能的,并且推荐把带有 defer 属性的 script 标签放到 heade 元素中。
async 的作用
async 翻译过来是异步的意思
async 的特性和 defer 有些类似
- 浏览器不会因为 async 脚本的下载而阻塞(和 defer 类似)
- 但是在带有 async 属性的脚本会在下载完成后立即执行,并且不能保证在 DOMContentLoaded 之前或者之后执行,我们要知道在脚本执行的时候是会阻塞 DOMTree 的构建。
- 还有就是 async 脚本是不能保证顺序的,它是独立下载、独立运行,不会等待其他脚本;
具体的执⾏时机图解
绿色-HTML 解析;黑色-停止 HTML 解析;黄色-脚本下载;棕色-脚本执行;
总结
script 标签的 defer 和 async 属性都是用来控制外部脚本的加载和执行方式的,他们对于改善页面加载非常有帮助。
但是他们的机制并不相同:
- defer 下载不会阻止 DOM 的构建,但是在 DOMTree 构建完成后,在 DOMContentLoaded 事件之前执行,并且 defer 脚本的执行是有序的。
- async 下载同样不会阻止 DOM 的构建,但是不会保证在 DOMcontentLoaded 之前或者之后执行,也不能保证顺序,它的每个脚本都是独立的。
所以他们的应用场景是这样的:
- defer 通常用于需要在文档解析后操作 DOM 的 js 代码,并且对多个脚本文件有顺序要求
- async 通常用于独立的脚本,对其他脚本,甚至对 DOM 没有依赖的脚本。
在现代化的框架开发中,已经不需要我们手动设置 async 和 defer 了,在使用脚手架的时候,一遍会根据我们需要自动加上 defer 属性,某些特殊场景下,比如第三方分析工具或者是广告追踪脚本等,需要我们自己加上 async 属性。
相关文章:

【HTML】defer 和 async 属性在 script 标签中分别有什么作用?
需要这两个属性的原因? 首先我们要知道的是,浏览器在解析 HTML 的过程中,遇到了 script 元素是不能继续构建 DOM 树的。 它会停止解析构建,首先去下载 js 代码,并且执行 js 的脚本;只有在等到 js 脚本执行…...

扫视扫描路径预测的评估:主观评估数 据库和基于循环神经网络的度量 记录
记录一 随着势头的不断增强,扫视预测逐渐成 为培养视觉注意力的热门研究课题。在扫视预测中,每个模型通常生成一个覆盖一系列注视点的扫描路径,以模拟动态扫视行为。因此, 通常通过计算预测的扫描路径与所有人类扫描 路径之间的相…...

【Java数据结构】优先级队列(堆)
【本节目标】 1. 掌握堆的概念及实现 2. 掌握 PriorityQueue 的使用 一. 优先级队列 1 概念 前面学过队列,队列是一种先进先出 (FIFO) 的数据结构 ,但有些情况下, 操作的数据可能带有优先级,一般出队 列时,可…...

图书个性化推荐系统|基于springBoot的图书个性化推荐系统设计与实现(附项目源码+论文+数据库)
私信或留言即免费送开题报告和任务书(可指定任意题目) 目录 一、摘要 二、相关技术 三、系统设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 本论文主要论述了如何使用JAVA语言开发一个图书个性化推荐系统&…...
通用车牌正则校验
要编写一个正则表达式来包含所有类型的车牌号,我们需要考虑以下几种常见的车牌类型: 1. 普通汽车车牌(蓝牌/黄牌) 规则:1个汉字 1个字母 5个字母或数字示例:京A12345、粤B5678X 2. 新能源车牌…...
使用 SSH 连接 GitLab 的常见问题及解决方案
使用 SSH 连接 GitLab 的常见问题及解决方案 在使用 SSH 连接到 GitLab 服务器时,可能会遇到类似于以下的错误信息: git192.168.xx.xxx: Permission denied (publickey).这个错误通常表示 SSH 无法验证你的公钥,导致无法访问 GitLab 仓库。…...

泛微E9开发 校验日期型字段是否符合要求
校验日期型字段是否符合要求 1、需求分析及展示效果1.1、需求确认1.2、展示效果 2、实现方法3、扩展知识——js日期相关函数 1、需求分析及展示效果 1.1、需求确认 “填报时间”是一个日期型字段,用户提出需求只能选择每个月的第二个周二,选择其他日期…...
ubuntu安装Vim和net-tools和htop
合并安装,快捷方便 sudo apt update sudo apt install net-tools vim htop在Ubuntu中安装Vim可以通过终端使用以下命令完成: sudo apt update sudo apt install vim这两条命令首先更新了本地的包索引,然后安装了Vim文本编辑器。 安装完成后…...
每天10个js面试题(六)
1、js数组方法? Array.push()此方法是在数组的后面添加新加元素,此方法改变了数组的长度Array.pop()此方法在数组后面删除最后一个元素,并返回数组,此方法改变了数组的长度 Array.shift()此方法在数组后面删除第一个元素…...

AIGC技术的学习 系列二
文章目录 前言一、AIGC是什么?1.1. 基本概念1.2机器学习分类二、 语言模型2.1. 基于统计的语言模型。2.2. 基于神经网络的语言模型。2.3. 基于预训练机制的的语言模型/大语言模型三、读入数据3.1. 不得不说的Transformer3.2. 影响力3.3. 根据人类反馈的强化学习3.4. 生成式AI3…...

惊艳!AI模型DIAMOND可模拟《反恐精英》,单张RTX 3090就能运行
最近,研究人员开发了一种名为 DIAMOND(Diffusion for World Modelling)的 AI 模型,它能够在神经网络中模拟著名的电脑游戏《反恐精英:全球攻势》(CS:GO)。 这个模型在一张 Nvidia RTX3090显卡上运行,能够达到每秒10帧…...

中波长线天线耦合的一个方法
围绕窗外墙外牵了10米的室外天线。 短波,fm都是很简单,一个夹子直接夹在拉杆天线上面,效果已经很好。 今天偶尔听到中波前面大约510khz的地方有个摩尔斯码。是成都附近机场的NDB。这个平时要在楼顶或者很空旷的地方才能收到。音量比较小&am…...

Java基础(6)
深拷贝和浅拷贝区别了解吗?什么是引用拷贝?关于深拷贝和浅拷贝区别,我这里先给结论:浅拷贝:浅拷贝会在堆上创建一个新的对象(区别于引用拷贝的一点),不过,如果原对象内部…...

[JAVAEE] 线程安全问题
目录 一. 什么是线程安全 二. 线程安全问题产生的原因 三. 线程安全问题的解决 3.1 解决修改操作不是原子性的问题 > 加锁 a. 什么是锁 b. 没有加锁时 c. 加锁时 d. 死锁 e. 避免死锁 3.2 解决内存可见性的问题 > volatile关键字 (易变的, 善变的) a. 不加…...
k8s 集群给用户生成 kubeconfig 文件
在 k8s 集群的 RBAC 里有用到用户、组的概念,但是它又不直接管理这些资源,而是通过外部身份验证机制(Authentication Mechanisms)来管理和定义的,比如证书进行签名时,将其配置为 Subject: O system:master…...

(八)Proteus仿真STM32单片机GPIO驱动数码管
1,参考上篇,将LED点阵屏更换成数码管如下图 2,修改驱动函数,数组seg[14]前10个是0-9数字的编码,后四个是空格,点,横线,下划线 char seg_decode(char num)//数字解码 {const char se…...
Python进阶知识1
Python函数 定义一个函数 1.什么是函数:函数是可以重复执行的语句块,可以重复调用 2.作用:用于封装语句块, 提高代码的重用性。 函数是面向过程编程的最小单位 def 语句 1.作用:用来定义( 创建)函数 2…...

单片机设计|基于STM32实现具有室内定位功能的智能手环的设计
作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验,被多个学校常年聘为校外企业导师,指导学生毕业设计并参与学生毕业答辩指导,…...

计算机网络——运输层(可靠传输、超时重传、选择确认、流量控制和拥塞控制、TCP连接和释放)
TCP可靠传输的实现 我们假定数据传输只在一个方向进行,即A发送数据,B给出确认。这样的好处是使讨论限于两个窗口,即发送方A的发送窗口和接收方B的接收窗口。 以字节为单位滑动窗口 发送方构造窗口 窗口前沿和后沿的移动情况 描述发送窗口的状…...
Web安全实践
前言 安全无小事,成败在细节,网络有风险,灾难弹指间。 安全一般情况下看不见,在你周围漂浮着,显现出来后,往往会刻骨铭心。正因为安全看不见,所以往往不受重视,因为感知到的概率真…...

简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...

2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录,但是由于这个树组件的节点越来越多,导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多,导致的浏览器卡顿,这里很明显就需要用到虚拟列表的技术&…...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 :HyperText Transfer Protocol(超文本传输协议) 默认端口 :HTTP 使用 80 端口,HTTPS 使用 443 端口。 请求方法 : GET :用于获取资源,…...

Qemu arm操作系统开发环境
使用qemu虚拟arm硬件比较合适。 步骤如下: 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载,下载地址:https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...
c# 局部函数 定义、功能与示例
C# 局部函数:定义、功能与示例 1. 定义与功能 局部函数(Local Function)是嵌套在另一个方法内部的私有方法,仅在包含它的方法内可见。 • 作用:封装仅用于当前方法的逻辑,避免污染类作用域,提升…...