script 标签中 defer 和 async 属性的区别

script 标签中的 defer Vs. async

在 HTML 中,script 标签可以使用 deferasync 属性来控制外部 JavaScript 脚本加载和执行的方式deferasync 都可以提高页面的加载性能,主要区别整理如下。

区别点deferasync
加载顺序按顺序加载异步加载,不保证加载顺序
执行顺序按文档中出现的顺序执行加载完立即执行,不保证执行顺序
执行时机HTML 文档完全解析后执行
但在 DOMContentLoaded 事件之前
可能在 HTML 文档解析完成之前执行
阻塞行为不会阻塞 HTML 的解析,浏览器解析 HTML 文档,脚本在后台异步加载不会阻塞 HTML 的解析,浏览器解析 HTML 文档,脚本在后台异步加载
适用场景需要保证执行顺序,并在文档解析完成后再执行的脚本。如依赖于 DOM 的脚本。不依赖其他脚本不依赖 DOM 的独立脚本。如分析工具或广告脚本。

注意:如果不使用 deferasync 属性,浏览器在遇到 <script> 标签时会阻塞 HTML 解析,直到脚本加载和执行完毕后才继续解析。使用 deferasync 后,脚本的记载是异步的,由网络进程实现,不会阻塞HTML 解析;脚本的执行是同步的,会占用渲染进程,defer 脚本的执行不会阻塞解析,但 async 脚本可能会阻塞 HTML 解析。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/844427.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文笔记:Vision GNN: An Image is Worth Graph of Nodes

neurips 2022 首次将图神经网络用于视觉任务&#xff0c;同时能取得很好的效果 1 方法 2 架构 在计算机视觉领域&#xff0c;常用的 transformer 通常是 isotropic 的架构&#xff08;如 ViT&#xff09;&#xff0c;而 CNN 更喜欢使用 pyramid 架构&#xff08;如 ResNet&am…

开源数据库同步工具DBSyncer

前言&#xff1a; 这么实用的工具&#xff0c;竟然今天才发现&#xff0c;相见恨晚呀&#xff01;&#xff01;&#xff01;&#xff01; DBSyncer&#xff08;英[dbsɪŋkɜː]&#xff0c;美[dbsɪŋkɜː 简称dbs&#xff09;是一款开源的数据同步中间件&#xff0c;提供M…

必看项目|多维度揭示心力衰竭患者生存关键因素(生存分析、统计检验、随机森林)

1.项目背景 心力衰竭是一种严重的公共卫生问题,影响着全球数百万人的生活质量和寿命,心力衰竭的病因复杂多样,既有个体生理因素的影响,也受到环境和社会因素的制约,个体的生活方式、饮食结构和医疗状况在很大程度上决定了其心力衰竭的风险。在现代社会,随着生活水平的提…

使用moquette mqtt发布wss服务

文章目录 概要一、制作的ssl证书二、配置wss小结 概要 moquette是一款不错的开源mqtt中间件&#xff0c;github地址&#xff1a;https://github.com/moquette-io/moquette。我们在发布mqtt服务的同时&#xff0c;是可以提供websocket服务器的&#xff0c;有些场景下需要用到&a…

OpenAI新模型开始训练!GPT6?

国内可用潘多拉镜像站GPT-4o、GPT-4&#xff08;更多信息请加Q群865143845&#xff09;: 站点&#xff1a;https://xgpt4.ai0.cn/ OpenAI 官网 28 日发文称&#xff0c;新模型已经开始训练&#xff01; 一、新模型开始训练 原话&#xff1a;OpenAI has recently begun training…

价值飙升30%,AI PC拉动半导体出货潮

由于处理器和DRAM的升级&#xff0c;大摩预测每台AI PC的半导体价值将增长20%-30%&#xff0c;PC平均售价也将提高7%。 台北国际电脑展即将于6月2日隆重开幕。 随着展会的临近&#xff0c;各种现象级的AI PC也蓄势待发。 就在上周&#xff0c;联想在业绩会上&#xff0c;首次…

2-EMMC启动及各分区文件生成过程

EMMC的使用比nand flash还是复杂一些&#xff0c;有其特有的分区和电器性能 1、启动过程介绍 跟普通nand或spi flash不同&#xff0c;uboot前面还有好几级 在vendor某些厂商的设计中&#xff0c;ATF并不是BOOTROM加载后的第一个启动镜像&#xff0c;可能是这样的&#xff1a; …

java的方法重写

重写的概述 重写是基于继承来说的&#xff0c;因为父类的方法需求不满足于子类&#xff0c;所以就要在进行方法重写&#xff0c;如果不知道继承是啥可以看我上一篇笔记 在这里用代码举个栗子 例如&#xff1a;我们定义了一个动物类代码如下&#xff1a; public class Animal…

Leecode热题100---二分查找--4:寻找两个正序数组的中位数

题目&#xff1a; 给定两个大小分别为 m 和 n 的正序&#xff08;从小到大&#xff09;数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 解法1、暴力解法&#xff08;归并&#xff09; 思路&#xff1a; 合并 nums1&#xff0c;nums2 为第三个数组 排序第三个数…

XXL-JOB分布式任务调度框架详解(全网最详细!!!)

​​​​​​​ 引言 第一部分&#xff1a;XXL-JOB概述 第二部分&#xff1a;架构与组件 第三部分&#xff1a;使用教程 第四部分&#xff1a;源码分析 第五部分&#xff1a;最佳实践 引言 在分布式系统中&#xff0c;任务调度是一项基础而又关键的服务&#xff0c;它涉…

Java设计模式:享元模式实现高效对象共享与内存优化(十一)

码到三十五 &#xff1a; 个人主页 目录 一、引言二、享元设计模式的概念1. 对象状态的划分2. 共享机制 三、享元设计模式的组成四、享元设计模式的工作原理五、享元模式的使用六、享元设计模式的优点和适用场景结语 [参见]&#xff1a; Java设计模式&#xff1a;核心概述&…

解决Spring BeanCreationException的常见问题

解决Spring BeanCreationException的常见问题 在使用Spring框架进行开发时&#xff0c;可能会遇到各种异常&#xff0c;其中之一就是BeanCreationException。本文将介绍如何解决以下特定的异常&#xff1a; org.springframework.beans.factory.BeanCreationException: Error …

拼接字符串

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 使用“”运算符可完成对多个字符串的拼接&#xff0c;“”运算符可以连接多个字符串并产生一个字符串对象。 例如&#xff0c;定义两个字符串&#…

任务3.1:采用面向对象方式求三角形面积

面向对象编程&#xff08;OOP&#xff09;是一种将现实世界中的实体抽象为对象&#xff0c;并通过类和对象来模拟现实世界中的行为和属性的编程范式。在本实战任务中&#xff0c;我们通过创建一个Triangle类来模拟现实世界中的三角形&#xff0c;并使用面向对象的方法来求解三角…

「清新题精讲」CF249D - Donkey and Stars

更好的阅读体验 CF249D - Donkey and Stars Description 给定 n n n 个点 ( x i , y i ) (x_i,y_i) (xi​,yi​) 和 a , b , c , d a,b,c,d a,b,c,d&#xff0c;求出最多有多少个点依次连接而成的折线上线段的斜率在 ( a b , c d ) (\frac{a}{b},\frac{c}{d}) (ba​,dc​…

linux怎么查询远程管理卡型号

在Linux中&#xff0c;要查询远程管理卡&#xff08;通常是服务器主板上的集成芯片&#xff0c;如iDRAC、iLO、BMC等&#xff09;的型号&#xff0c;可以使用一些特定厂商的工具&#xff0c;或者通过IPMI&#xff08;Intelligent Platform Management Interface&#xff09;来实…

【智能算法】波搜索算法(WSA)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献5.代码获取 1.背景 2024年&#xff0c;H Zhang受到雷达技术启发&#xff0c;提出了波搜索算法&#xff08;Wave Search Algorithm, WSA&#xff09;。 2.算法原理 2.1算法思想 WSA模拟雷达工作时的发射、反…

opencascade 笔记

opencascade 画一个无限大的面 在 OpenCascade 中&#xff0c;要绘制一个无限大的面&#xff0c;你可以使用 gp_Pln 类来定义一个平面&#xff0c;然后将其绘制出来。这里是一个示例代码&#xff0c;演示如何在 OpenCascade 中绘制一个无限大的平面&#xff1a; #include <…

学生管理系统 面向过程

#学生管理系统 面向过程 学生管理系统 面向过程 学生信息:name,tel 1.添加学生 2.删除学生 3.修改学生 4.查询学生 5.查询所有学生 6.退出系统 # 定义一个空列表 stu_list []# help 展示不同的功能 def helplist():print(欢迎使用学生管理信息)print(1.添加学生)print(2.删除学…

Hudi之数据读写探究

Hudi之数据读写深入探究 1. Hudi数据写入 1-1. 写操作 Hudi数据湖中的数据更新、插入和删除操作&#xff0c;是一个基于Apache Hadoop的库&#xff0c;为数据湖提供了一种有效的方法来处理更新和增量数据&#xff0c;并支持基于时间的快照和增量数据处理。Hudi支持三种主要的…