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

news/2024/6/21 6:57:20/文章来源:https://blog.csdn.net/weixin_52401264/article/details/139305687

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.ldbm.cn/p/430535.html

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

相关文章

牛客热题:数据流中的中位数

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;力扣刷题日记 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 文章目录 牛客热题&#xff1a;数据流中的中位数题目链接方法一…

Python--List列表

list列表⭐⭐ 1高级数据类型 Python中的数据类型可以分为&#xff1a;数字型&#xff08;基本数据类型&#xff09;和非数字型&#xff08;高级数据类型&#xff09; ●数字型包含&#xff1a;整型int、浮点型float、布尔型bool、复数型complex ●非数字型包含&#xff1a;字符…

【微服务】springboot 构建docker镜像多模式使用详解

目录 一、前言 二、微服务常用的镜像构建方案 3.1 使用Dockerfile 3.2 使用docker plugin插件 3.3 使用docker compose 编排文件 三、环境准备 3.1 服务器 3.2 安装JDK环境 3.2.1 创建目录 3.2.2 下载安装包 3.2.3 配置环境变量 2.2.4 查看java版本 3.3 安装maven …

STM32定时器及输出PWM完成呼吸灯

文章目录 一、STM32定时器原理1、基本定时器2、通用定时器&#xff08;1&#xff09;时钟源&#xff08;2&#xff09;预分频器PSC&#xff08;3&#xff09;计数器CNT&#xff08;4&#xff09;自动装载寄存器ARR 3、高级定时器 二、PWM工作原理三、控制LED以2s的频率周期性地…

(超详细)字符函数和字符串函数【上】

前言 C 语言中对字符和字符串的处理很是频繁&#xff0c;但是 C 语言本身是没有字符串类型的&#xff0c;字符串通常放在 常量字符串 中或者 字符数组 中。 字符串常量 适用于那些对它不做修改的字符串函数 . 1.求字符串长度函数 strlen函数 我们要求一个字符串函数的长度…

【数据库基础-mysql详解之索引的魅力(N叉树)】

索引的魅力目录 &#x1f308;索引的概念&#x1f308;使用场景&#x1f308;索引的使用&#x1f31e;&#x1f31e;&#x1f31e;查看MySQL中的默认索引&#x1f31e;&#x1f31e;&#x1f31e;创建索引&#x1f31e;&#x1f31e;&#x1f31e;删除索引 站在索引背后的那个男…

深入解析 JSONPath:从入门到精通

码到三十五 &#xff1a; 个人主页 在数据处理和交换领域&#xff0c;JSON已经成为了一种广泛使用的数据格式&#xff0c; 如何有效地查询和操作这些数据也变得越来越重要。在这种情况下&#xff0c;JSONPath 应运而生&#xff0c;成为了一种在JSON数据中定位和提取信息的强大工…

手机投屏技巧:手机怎么投屏到电脑显示屏上?精选6招解决!

手机怎么投屏到电脑显示屏上&#xff1f;出于一些不同的原因&#xff0c;大多数人都希望能将手机投屏到电脑上。其中一个常见的原因是&#xff0c;大家经常会希望在笔记本电脑上共享图片&#xff0c;而无需上传或者登录微信进行文件传输。以及希望不依靠投影仪&#xff0c;就能…

Google使用AI改进了 Sheets;开源视觉语言模型llama3v;开源情绪语音模型ChatTTS;

✨ 1: Google has improved Sheets with AI. Google 使用 AI 改进了 Sheets 您可以使用 Gemini 处理您的数据并将其变成老师。 优化您的数据 Gemini 了解您的数据并提出改进建议。 例如&#xff0c;它可以将重复数据转换为更实用的下拉框。 解释数据 通过单击双子座图标…

九章云极DataCanvas公司重磅亮相第七届数字中国建设峰会

近日&#xff0c;由国家发展改革委、国家数据局、国家网信办、科技部、国务院国资委、福建省人民政府共同主办的第七届数字中国建设峰会在福州盛大举行&#xff0c;九章云极DataCanvas公司重磅亮相峰会现场&#xff0c;深度展示智算中心建设核心成果及“算法算力”一体化AI智算…

使用python绘制一个五颜六色的爱心

使用python绘制一个五颜六色的爱心 介绍效果代码 介绍 使用numpy与matplotlib绘制一个七彩爱心&#xff01; 效果 代码 import numpy as np import matplotlib.pyplot as plt# Heart shape function def heart_shape(t):x 16 * np.sin(t)**3y 13 * np.cos(t) - 5 * np.cos…

Day 6:2981. 找出出现至少三次的最长特殊子字符串 I

Leetcode 2981. 找出出现至少三次的最长特殊子字符串 I 给你一个仅由小写英文字母组成的字符串 s 。 如果一个字符串仅由单一字符组成&#xff0c;那么它被称为 特殊 字符串。例如&#xff0c;字符串 “abc” 不是特殊字符串&#xff0c;而字符串 “ddd”、“zz” 和 “f” 是特…

转行一年了

关注、星标公众号&#xff0c;直达精彩内容 ID&#xff1a;技术让梦想更伟大 整理&#xff1a;李肖遥 来公司一年了。 说是转行其实还是在半导体行业&#xff0c;熟悉我的朋友知道 &#xff0c;我在18年开始进入半导体行业&#xff0c;那个时候想着行业很重要&#xff0c;站对了…

酒店提前线上订房小程序源码系统 PHP+MySQL组合开发 源码开源可二开 带完整的安装代码包以及搭建教程

系统概述 随着移动互联网的普及&#xff0c;越来越多的人习惯通过手机进行酒店预订。传统的线下订房方式逐渐无法满足用户的需求&#xff0c;酒店提前线上订房小程序的出现成为必然趋势。该源码系统的开发旨在为酒店提供一个便捷、高效的线上订房平台&#xff0c;提升用户体验…

JAVA:Random详解

Java中的java.util.Random类用于生成伪随机数。它提供了多种方法来生成不同类型的随机数&#xff0c;包括整数、浮点数和布尔值。以下是对Random类及其主要方法的详细介绍 一、生成随机数 创建一个Random对象&#xff0c;可以使用以下两种方式&#xff1a; 无参构造函数&…

222.完全二叉树的节点个数

给出一个完全二叉树&#xff0c;求出该树的节点个数。 示例 1&#xff1a; 输入&#xff1a;root [1,2,3,4,5,6]输出&#xff1a;6 示例 2&#xff1a; 输入&#xff1a;root []输出&#xff1a;0 示例 3&#xff1a; 输入&#xff1a;root [1]输出&#xff1a;1 提示…

flutter 实现旋转星球

先看效果 planet_widget.dart import dart:math; import package:flutter/material.dart; import package:vector_math/vector_math_64.dart show Vector3; import package:flutter/gestures.dart; import package:flutter/physics.dart;class PlanetWidget extends StatefulW…

学业辅导导师:文心一言智能体详细介绍和开发

一、前言 本期题目 开发方向&#xff1a;学习成长类 解读&#xff1a; AI技术在学习成长方向的应用正日益增多&#xff0c;本期赛题需围绕该方向开发智能体包括但不限于:作文辅导助手、个性化学习助手、考试助手、各垂类教育内容专家等 二、我的智能体&#xff1a;学业辅导…

el-image本地图片不显示,提示加载失败

问题描述&#xff1a;el-image使用本地图片不显示&#xff0c;提示加载失败。 <el-image src"../../assets/img/value.png"></el-image> 解决方法&#xff1a;src用里面加个require&#xff0c;注意给 src 属性加: <el-image :src"require(../..…

100个 Unity小游戏系列五 -Unity 抽奖游戏专题三老虎机游戏

一、演示效果 二、知识点讲解 2.1 布局 public void CreateItems(SlotsData[] slotsData){isInited false;slotsPrizeList new List<SlotsData>();for (int i 0; i < slotsData.Length; i){var item slotsData[i];slotsPrizeList.Add(item);}float bottomY -it…