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

深入解析 HTML 中 `＜script＞` 标签的 async 和 defer 属性

news 来源：原创 2025/9/7 14:10:14

一、背景与问题

在网页性能优化中，脚本的加载和执行方式直接影响页面渲染速度和用户体验。传统 <script> 标签的阻塞行为可能导致页面“白屏”，而 async 和 defer 属性提供了非阻塞的解决方案。本周重点研究二者的差异、适用场景及实际应用。

二、核心概念解析

1. 默认 `<script>` 的行为

‌阻塞 HTML 解析‌：浏览器遇到 <script> 标签时，会暂停 HTML 解析，下载并执行脚本，完成后继续解析。
‌问题‌：大脚本或网络延迟时，显著延长页面渲染时间。

2. `async` 属性

‌行为‌：
- 脚本异步下载（与 HTML 解析并行）。
- ‌下载完成后立即执行‌，执行时会再次阻塞 HTML 解析。
‌特点‌：
- 脚本执行顺序‌不确定‌（先下载完的先执行）。
- 适用于‌独立且无依赖‌的脚本（如统计分析、广告 SDK）。

3. `defer` 属性

‌行为‌：
- 脚本异步下载（与 HTML 解析并行）。
- 脚本延迟到 ‌HTML 解析完成后、DOMContentLoaded 事件前‌ 按顺序执行。
‌特点‌：
- 执行顺序与声明顺序‌严格一致‌。
- 适用于‌依赖 DOM 或其他脚本‌的场景（如页面初始化逻辑）。

4. 对比表格

属性	加载方式	执行时机	执行顺序	适用场景
默认	同步	立即执行	按声明顺序	无
`async`	异步	下载完立即执行	不确定	独立脚本（如 GA 统计）
`defer`	异步	HTML 解析后顺序执行	按声明顺序	依赖型脚本

三、示例与验证

代码示例

<script src="script1.js" async></script>  
<script src="script2.js" defer></script>  
<script src="script3.js"></script>执行顺序模拟
默认脚本‌：script3.js 阻塞 HTML 解析，优先执行。
async 脚本‌：若 script1.js 下载速度快于 HTML 解析，可能先于 defer 脚本执行。
defer 脚本‌：script2.js 在 HTML 解析完成后按顺序执行。
四、最佳实践
优先使用 defer‌：确保脚本顺序执行且不阻塞渲染。
谨慎使用 async‌：仅用于无依赖的第三方脚本。
动态脚本‌：通过 document.createElement('script') 插入的脚本默认具有 async 行为。
五、兼容性与注意事项
兼容性‌：
defer 支持所有主流浏览器（包括 IE10+）。
async 不支持 IE9 及以下。
注意点‌：同时使用 async 和 defer 时，现代浏览器以 async 优先。附录‌MDN 文档
测试 Demo 链接（可选）
text
Copy Code### 说明  
1. &zwnj;**兼容性**&zwnj;：此 Markdown 文件可被所有支持 Markdown 的工具（如 Typora、VS Code、GitHub）正确解析。  
2. &zwnj;**语法重点**&zwnj;：  - 代码块用 ` ````包裹，并指定语言（如 `html`）。  - 表格使用 `|` 分隔列，`---` 分隔表头。  - HTML 标签用反引号包裹避免解析冲突（如 ``<script>``）。

深入解析 HTML 中 `＜script＞` 标签的 async 和 defer 属性

一、背景与问题在网页性能优化中，脚本的加载和执行方式直接影响页面渲染速度和用户体验。传统 <script> 标签的阻塞行为可能导致页面“白屏”，而 async 和 defer 属性提供了非阻塞的解决方案。本周重点研究二者的差异、适用场景及实际应用。二、…...

编程日记 2025/9/7 14:10:14

【从0到1学Elasticsearch】Elasticsearch从入门到精通（上）

黑马商城作为一个电商项目，商品的搜索肯定是访问频率最高的页面之一。目前搜索功能是基于数据库的模糊搜索来实现的，存在很多问题。首先，查询效率较低。由于数据库模糊查询不走索引，在数据量较大的时候，查询性能很差…...

编程日记 2025/9/2 10:42:22

2.0 全栈运维管理：Linux网络基础核心概念解析、Proxmox网络组件详解、虚拟化网络模型分类

本文是Proxmox VE 全栈管理体系的系列文章之一，如果对 Proxmox VE 全栈管理感兴趣，可以关注“Proxmox VE 全栈管理”专栏，后续文章将围绕该体系，从多个维度深入展开。摘要：Linux 网络基础借助桥接、VLAN 和 Bonding 实…...

编程日记 2025/8/31 17:26:43

案例驱动的 IT 团队管理：创新与突破之路：第四章危机应对：从风险预见到创新破局-4.1.3重构过程中的团队士气管理

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲案例驱动的 IT 团队管理：创新与突破之路 - 第四章危机应对：从风险预见到创新破局4.1.3 重构过程中的团队士气管理1. 技术债务重构与团队士气的矛盾2…...

编程日记 2025/9/4 23:01:30

洛谷刷题小结

#include <iostream> using namespace std; int n, m,ans0; char s[105][105]; //深搜 void dfs(int x, int y) {//将搜索到的水坑看为干地s[x][y] .;//确定八个方向int next[8][2] {{0,1},{0,-1},{1,0},{-1,0},{1,1},{1,-1},{-1,1},{-1,-1},};//朝八个方向搜索for (in…...

编程日记 2025/9/2 9:44:09

Android Compose 权限申请完整指南

Android Compose 权限申请完整指南在 Jetpack Compose 中处理运行时权限申请需要结合传统的权限 API 和 Compose 的状态管理。以下是完整的实现方案： 1. 基本权限申请流程添加依赖 implementation "com.google.accompanist:accompanist-permissions:0.34…...

编程日记 2025/8/27 1:22:04

VirtualBox虚拟机转换到VMware

VirtualBox虚拟机转换到VMware **参考文章：**https://blog.csdn.net/qq_30054403/article/details/123451969 一.找到对应文件位置 Windows11系统，VirtualBox版本为6.1.50，VMware版本为17.5.2 1.首先找到自己需要转换的vdi文件位置 D:\v…...

编程日记 2025/9/6 18:53:04

Spring Boot（二十二）：RedisTemplate的List类型操作

RedisTemplate和StringRedisTemplate的系列文章详见： Spring Boot（十七）：集成和使用Redis Spring Boot（十八）：RedisTemplate和StringRedisTemplate Spring Boot（十九）…...

编程日记 2025/9/2 21:49:22

【MySQL】关于何时使用start slave和start slave user=‘’ password=‘’

这个问题是我在配置三个服务器的复制拓扑时，一开始没有给复制用户 repl 创建密码，搭建好循环拓扑后，给server1的复制用户通过 ALTER USER USER() IDENTIFIED BY oracle 设置了密码，然后同步给了server2和server3。这时server2突…...

编程日记 2025/9/5 7:39:54

（个人题解）第十六届蓝桥杯大赛软件赛省赛C/C++ 研究生组

宇宙超级无敌声明：个人题解（好久不训练，赛中就是一个憨憨） 先放代码吧，回头写思路。文章目录 A. 数位倍数B. IPv6C. 变换数组D. 最大数字E. 冷热数据队列F. 01串G. 甘蔗H. 原料采购 A. 数位倍数问： 在1至…...

编程日记 2025/9/6 16:19:59

GitLab + Jenkins + .Net8 实现CICD部署

前提条件：需要安装好 Jenkins 和 GitLab 。 1. Jenkins配置登录 Jenkins 找到自己的一个任务，点击配置（没有任务就新建）。按图操作点击高级展开后截图，点击生成Token 配置好自己的作业（我的是一个 .Ne…...

编程日记 2025/9/5 22:26:04

AI工具导航快速找到喜欢的AI工具功能使用介绍

此篇文章内容来源CTO Plus技术服务栈官网：http://www.mdrsec.com/ 在人工智能技术迅猛发展的2025年，AI工具的数量和种类呈爆炸式增长，涵盖文本生成、图像创作、视频编辑、编程辅助等多个领域。面对琳琅满目的AI工具，如何高效筛选和…...

编程日记 2025/9/2 13:39:39

[题解] Educational Codeforces Round 168 (Rated for Div. 2) E - level up

链接思路 1 注意到在 k ∈ [ 1 , n ] k \in [1,n] k∈[1,n] 可以得到的最高等级分别为: n , n 2 , n 3 . . . . . n n n,\frac{n}{2},\frac{n}{3}.....\frac{n}{n} n,2n,3n.....nn, 总的个数是一个调和级数, s u m n ∗ ln ⁡ n sumn*\ln n sumn∗lnn, 完全可以处…...

编程日记 2025/9/4 12:28:14

达梦数据库-学习-19-兼容ORACLE相关参数介绍

目录一、环境信息二、介绍三、参数一、环境信息名称值CPU12th Gen Intel(R) Core(TM) i7-12700H操作系统CentOS Linux release 7.9.2009 (Core)内存4G逻辑核数2DM版本1 DM Database Server 64 V8 2 DB Version: 0x7000c 3 03134284194-202…...

编程日记 2025/9/3 12:02:00

如何通过 Spring 层面进行事务回滚？

Spring 中事务可以分为声明式事务和编程式事务，那么解下来就从这两方面说一说在 Spring 层面个怎么进行回滚声明式事务回滚： 1. 基础注解配置通过Transactional注解实现自动回滚，默认对RuntimeException和Error生效 Transactional publ…...

编程日记 2025/9/4 9:48:10

学Qt笔记

使用的是Qt SDK5.14.0 根据比特汤众老师的课程学习先叠个甲：本人正在学qt，视角还不完备，如有错误请多多包含选了widget开始学习 1.qt creator设计提供了拖拽式的编辑ui的控件，和代码直接编辑构建的方式 2.浅浅的认识了qt的对…...

编程日记 2025/9/6 14:36:13

【HarmonyOS 5】鸿蒙实现手写板

【HarmonyOS 5】鸿蒙实现手写板一、前言实现一个手写板功能，基本思路如下： 创建一个可交互的组件，用户在屏幕上触摸并移动手指时，会根据触摸的位置动态生成路径，并使用黑色描边绘制在屏幕上。当用户按下屏幕时…...

编程日记 2025/9/4 21:00:59

JavaWeb 课堂笔记 —— 09 MySQL 概述 + DDL

本系列为笔者学习JavaWeb的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖SpringMyBatisSpringMVCSpringBoot等）》，章节分布参考视频教程，为同样学习…...

编程日记 2025/9/2 15:10:13

设计模式 --- 访问者模式

访问者模式是一种行为设计模式，它允许在不改变对象结构的前提下，定义作用于这些对象元素的新操作。优点： 1.符合开闭原则：新增操作只需添加新的访问者类，无需修改现有对象结构。 2.操作逻辑集中管理&am…...

编程日记 2025/9/4 18:23:57

【Linux C】简单bash设计

主要功能循环提示用户输入命令（minibash$）。创建子进程（fork()）执行命令（execlp）。父进程等待子进程结束（waitpid）。关键问题参数处理缺失：scanf("%s", buf)…...

编程日记 2025/9/6 21:21:04

如何在Agent中设置Memory

什么是LLM代理？ LLM代理可以被定义为能够对环境采取行动的大型语言模型。代理的主要组成部分包括：记忆、规划、提示、知识和工具。大型语言模型可以被视为这个架构的大脑，而其他所有组件则是代理正常工作的基础模块。代理的组成部分 1. 提…...

编程日记 2025/8/28 5:15:56

【强化学习-蘑菇书-3】马尔可夫性质，马尔可夫链，马尔可夫过程，马尔可夫奖励过程，如何计算马尔可夫奖励过程里面的价值

欢迎去各大电商平台选购纸质版蘑菇书《Easy RL：强化学习教程》文章是根据蘑菇书EasyRL ，网络查找资料和汇总，以及新版本的python编写的可运行代码和示例，包含了一些自己对书内容的简单理解一、马尔可夫性质在随机过程中&a…...

编程日记 2025/9/3 6:07:06

leetcode 718 最长公共子数组

这个题目和最长公共子数组，类似于镜像题，子问题比较难想。对于 d p [ i ] [ j ] dp[i][j] dp[i][j] ，定义为分别以 i i i 和 j j j 结尾的最长公共子数组（公共后缀） 核心代码： if(nums1[i-1] nums2[j-…...

编程日记 2025/9/3 0:35:55

【C++】继承：万字总结

📝前言： 这篇文章我们来讲讲面向对象三大特性之一——继承 🎬个人简介：努力学习ing 📋个人专栏：C学习笔记 🎀CSDN主页愚润求学 🌄其他专栏：C语言入门基础，py…...

编程日记 2025/9/4 18:34:55

java和c#的相似及区别基础对比

用过十几种语言，但是java和c#是最为重要的两门。c#发明人曾主导开发了pascal和delphi，加入微软后，参考了c和java完成了c#和net。大家用过java或c#任意一种的，可以通过本篇文章快速掌握另外一门语言。基础语法变量声明&#xf…...

编程日记 2025/8/29 15:34:06

TP8 PHP 支付宝-通用版-V3 SDK 接口加签方式为证书方式

TP8 已安装支付宝-通用版-V3 SDK 接口加签方式之前使用密钥方式，现在要使用证书官方文档小程序文档 - 支付宝文档中心 SDK源码仓库https://github.com/alipay/alipay-sdk-php-all/tree/master/v3 第一步：生成证书需要先下载支付宝官方工具&#xff1a…...

编程日记 2025/9/5 2:26:33

地毯填充luogu

P1228 地毯填补问题题目描述相传在一个古老的阿拉伯国家里，有一座宫殿。宫殿里有个四四方方的格子迷宫，国王选择驸马的方法非常特殊，也非常简单：公主就站在其中一个方格子上，只要谁能用地毯将除公主站立的地方外的所有地方盖上，美丽漂亮聪慧的公主就是他的人了。公主…...

编程日记 2025/9/4 3:44:00

数据查询语言

一、DQL基础语法与执行逻辑 1.SELECT语句结构（1）核心语法： SELECT 列名 FROM 表名 WHERE 条件，用于指定返回的字段和筛选行。例如， SELECT name, age FROM emp WHERE age > 25 筛选年龄大于25岁的员工姓名和年龄。（2）执行顺序： FROM → WHERE → GROUP BY → HAV…...

编程日记 2025/9/3 14:30:58

【NLP】18. Encoder 和 Decoder

1. Encoder 和 Decoder 概述在序列到序列（sequence-to-sequence，简称 seq2seq）的模型中，整个系统通常分为两大部分：Encoder（编码器）和 Decoder（解码器）。 Encoder&…...

编程日记 2025/9/6 16:48:39

基于Cline和OpenRouter模型进行MCP实战

大家好，我是herosunly。985院校硕士毕业，现担任算法工程师一职，获得CSDN博客之星第一名，热衷于大模型算法的研究与应用。曾担任百度千帆大模型比赛、BPAA算法大赛评委，编写微软OpenAI考试认证指导手册。曾获得多项AI顶级比赛的Top名次，其中包括阿里云、科大讯飞比赛第一名…...

编程日记 2025/8/30 6:33:40

Elasticsearch 故障转移及水平扩容

一、故障转移 Elasticsearch 的故障转移（Failover）机制是其高可用性的核心，通过分布式设计、自动检测和恢复策略确保集群在节点故障时持续服务。 1.1 故障转移的核心组件组件作用Master 节点管理集群状态（分片分配、索引创建&…...

编程日记 2025/9/5 4:19:41

聊聊Spring AI的Prompt

序本文主要研究一下Spring AI的Prompt Prompt org/springframework/ai/chat/prompt/Prompt.java public class Prompt implements ModelRequest<List<Message>> {private final List<Message> messages;private ChatOptions chatOptions;public Prompt(…...

编程日记 2025/9/7 1:23:40

centos 7:虚拟机网络配置

1、网络模式选择桥接模式特点：虚拟机会获得与物理机同网段的独立IP，可直接访问内网/外网适用场景：渗透测试、需要与其他设备交互的场景配置要点：需在VMware中指定桥接到物理机的真实网卡（如WiFi或有线网卡&#xff…...

编程日记 2025/9/7 12:07:41

Spring - 14 ( 5000 字 Spring 入门级教程 )

一：Spring原理 1.1 Bean 作用域的引入在 Spring 的 IoC 和 DI 阶段，我们学习了 Spring 如何有效地管理对象。主要内容包括： 使用 Controller、Service、Repository、Component、Configuration 和 Bean 注解来声明 Bean 对象。通过 Applic…...

编程日记 2025/9/2 19:50:56

基于贝叶斯估计的多传感器数据融合算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 贝叶斯估计 4.2 多传感器数据融合 5.完整程序 1.程序功能描述基于贝叶斯估计的多传感器数据融合算法matlab仿真，输入多个传感器的数据，通过贝叶斯估计&#xf…...

编程日记 2025/9/7 6:08:42

linux编辑器-vim

一、基本概念 vim有很多模式但是有三个重要的模式分别是命令模式、插入模式、低行模式。命令模式：控制光标移动、字符、字或行的删除、移动、复制等。插入模式：只有在该模式下才可以进行文字输入。低行模式：文件的保存或退出，也…...

编程日记 2025/9/5 6:38:48

day27图像处理OpenCV

文章目录一、图像预处理1 图像翻转(图像镜像旋转)2 图像仿射变换2.1 图像旋转2.2 图像平移2.3 图像缩放2.4 图像剪切 3 插值方法3.1 最近邻插值3.2 双线性插值(常用)3.3 像素区域插值--一般缩小使用3.4 双三次插值3.5 Lanczos插值一、图像预处理 1 图像翻转(图像镜像旋转) …...

编程日记 2025/9/3 12:57:56

iOS开发--接入ADMob广告失败

接入ADMob的第三方广告，初始化时提示错误如下： state Not Ready;No such adapter in the application 查了各种官方文档，发现接入过程正确，查了Chatgpt和DeepSeek，它们各种分析，分析结果如下： …...

编程日记 2025/9/5 20:57:15

PyTorch进阶学习笔记[长期更新]

第一章 PyTorch简介和安装 PyTorch是一个很强大的深度学习库，在学术中使用占比很大。我这里是Mac系统的安装，相比起教程中的win/linux安装感觉还是简单不少（之前就已经安好啦），有需要指导的小伙伴可以评论。第二章…...

编程日记 2025/9/5 0:29:49

vue3 ts 自定义指令 app.directive

在 Vue 3 中，app.directive 是一个全局 API，用于注册或获取全局自定义指令。以下是关于 app.directive 的详细说明和使用方法 app.directive 用于定义全局指令，这些指令可以用于直接操作 DOM 元素。自定义指令在 Vue 3 中非常强大&#xff0…...

编程日记 2025/9/6 10:38:28

【漫话机器学习系列】199.过拟合 vs 欠拟合（Overfit vs Underfit）

机器学习核心问题：过拟合 vs 欠拟合图示作者：Chris Albon 1. 什么是拟合（Fit）？ 拟合（Fit）是指模型对数据的学习效果。理想目标： 在训练集上效果好在测试集上效果也好不复杂、…...

编程日记 2025/9/4 7:07:16

从0到1使用C++操作MSXML

1. 引言 MSXML（Microsoft XML Core Services）是微软提供的一套用于处理XML的COM组件库，广泛应用于Windows平台的XML解析、验证、转换等操作。本文将详细介绍如何从零开始，在C中使用MSXML解析和操作XML文件，包含完整的…...

编程日记 2025/9/2 4:04:36

【中间件】nginx反向代理实操

一、说明 nginx用于做反向代理，其目标是将浏览器中的请求进行转发，应用场景如下： 说明： 1、用户在浏览器中发送请求 2、nginx监听到浏览器中的请求时，将该请求转发到网关 3、网关再将请求转发至对应服务二、具体操作…...

编程日记 2025/8/28 9:11:13

C语言中冒泡排序和快速排序的区别

冒泡排序和快速排序都是常见的排序算法，但它们在原理、效率和应用场景等方面存在显著区别。以下是两者的详细对比： 一、算法原理 1. 冒泡排序原理：通过重复遍历数组，比较相邻元素的大小，并在必要时交换它们的位置。…...

编程日记 2025/9/6 16:42:58

进程基本介绍

进程是操作系统的重要内容,都是需要了解和学习的,那么今天我们就来好好看看. 进程基本介绍 1、Linux中,每个执行的程序都称为一个进程,每一个进程都分配一个ID号(pid,进程号). 2.每个进程都可以以两种方式存在的,前台与后台,所谓前台进程就是用户目前的屏幕上可以进行操作的,…...

编程日记 2025/8/30 15:10:23

通过平台大数据智能引擎及工具,构建设备管理、运行工况监测、故障诊断等应用模型的智慧快消开源了

智慧快消视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒，省去繁琐重复的适配流程，实现芯片、算法、应用的全流程组合，从而大大减少企业级应用约95%的开发成本。基于多年的深度…...

编程日记 2025/9/5 11:52:06

不同数据库的注入报错信息

不同数据库在报错注入时返回的报错信息具有显著差异，了解这些差异可以帮助快速判断数据库类型并构造针对性的注入攻击语句。以下是主流数据库的典型报错模式及对比： 目录 1. MySQL 2. Microsoft SQL Server 3. Oracle …...

编程日记 2025/9/7 9:58:05

tcpdump`是一个非常强大的命令行工具，用于在网络上捕获并分析数据包

通过 tcpdump，你可以抓取网络流量，诊断网络问题，或分析通信协议的细节。下面是如何在 Linux 上使用 tcpdump 进行抓包的详细步骤。 1. 安装 tcpdump 在大多数 Linux 发行版中，tcpdump 是默认安装的。如果没有安装，可…...

编程日记 2025/9/2 4:09:07

【漏洞复现】Vite 任意文件读取漏洞 CVE-2025-30208/CVE-2025-31125/CVE-2025-31486/CVE-2025-32395

Vite是什么，和Next.js有什么区别？ 我上一篇文章刚介绍了Next.js漏洞的复现： 【漏洞复现】Next.js中间件权限绕过漏洞 CVE-2025-29927_next.js 中间件权限绕过漏洞-CSDN博客 Vite 和 Next.js 是两个不同类型的前端工具，它们各自…...

编程日记 2025/9/4 0:14:11

Odrive源码分析(六) 相关控制变量传递

本文记录下odrive源代码中相关控制模块之间变量的传递，这对理解odrive源代码至关重要。通过前面文字的分析，odrive有两条数据链路，一条是通过中断进行实时的控制，另外一条是OS相关的操作，主要分析下中断内部的相关变量…...

编程日记 2025/9/4 17:36:14

一、背景与问题

二、核心概念解析

1. 默认 <script> 的行为

2. async 属性

3. defer 属性