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

【HTML】defer 和 async 属性在 script 标签中分别有什么作用?

需要这两个属性的原因?

首先我们要知道的是,浏览器在解析 HTML 的过程中,遇到了 script 元素是不能继续构建 DOM 树的。

  • 它会停止解析构建,首先去下载 js 代码,并且执行 js 的脚本;
  • 只有在等到 js 脚本执行结束之后,才会继续解析 html,构建 DOM 树。

那为什么要这样做呢?

  • 因为 js 的作用之一就是操作 DOM,并且可以修改 DOM;
  • 如果等到 DOM 树构建完成并且渲染后再去执行 js,就会造成严重的回流重绘,影响页面性能;
  • 所以,在遇到 script 标签的时候,浏览器采取了先加载执行后构建 DOM 树的方案。

虽然是解决了回流和重绘的问题,但这又产生了新的问题!(解决一个问题产生了新的问题😂)

在现在的网页开发模式中(Vue、React),往往 js 脚本比 HTML 结构更“重”,需要加载和处理的时间更长。

这样就会导致页面的解析阻塞(在脚本完成下载、执行之前,用户在界面上什么都看不到)。

为了解决上面的问题,script 元素给我们提供了两个属性来处理:deferasync

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. 新能源车牌&#xf…...

使用 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()此方法在数组后面删除第一个元素&#xf…...

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安全实践

前言 安全无小事,成败在细节,网络有风险,灾难弹指间。 安全一般情况下看不见,在你周围漂浮着,显现出来后,往往会刻骨铭心。正因为安全看不见,所以往往不受重视,因为感知到的概率真…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问(基础概念问题) 1. 请解释Spring框架的核心容器是什么?它在Spring中起到什么作用? Spring框架的核心容器是IoC容器&#…...

Selenium常用函数介绍

目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题,说是客户的导入文件模版想支持部分导入内容的下拉选,于是我就找了easyexcel官网寻找解决方案,并没有找到合适的方案,没办法只能自己动手并分享出来,针对Java生成Excel下拉菜单时因选项过多导…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战:导出框架元素数据到Excel 在结构工程师的日常工作中,经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时,还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么? 一键点击,就能将ETABS中所有框架元素的基…...