JavaScript脚本:async,defer

🧑‍🎓 个人主页:《爱蹦跶的大A阿》

🔥当前正在更新专栏:《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

✨ 前言

JavaScript 脚本 是 web 开发中的重要组成部分,用于为网页添加交互性和动态效果。然而,脚本的加载和执行可能会影响网页的性能和用户体验。

async 和 defer 是两个用于控制 JavaScript 脚本加载和执行的属性。它们可以帮助开发者优化网页性能,并提升用户体验。

理解 async 和 defer 属性 的区别和应用场景,对于开发人员来说至关重要。本文将深入探讨这两个属性,并提供大量代码示例,帮助你:

  • 掌握 async 和 defer 属性的含义和工作原理
  • 了解如何使用这两个属性来优化网页性能
  • 学习如何根据不同的场景选择合适的属性
  • 掌握使用 async 和 defer 属性时的注意事项

无论你是初学者还是经验丰富的开发人员,本文都将为你提供一些有价值的信息。

在阅读本文之前,请确保你已经具备以下基础知识:

  • HTML 基础
  • JavaScript 基础

准备好了吗?让我们开始吧!

以下是一些关于 async 和 defer 属性的常见问题:

1. 什么时候应该使用 async 属性?

  • 当脚本不依赖于页面其他部分时,例如分析脚本或广告脚本。
  • 当脚本需要尽快执行时,例如用于性能监控或错误报告的脚本。

2. 什么时候应该使用 defer 属性?

  • 当脚本依赖于页面其他部分时,例如初始化脚本或功能脚本。
  • 当脚本不需要立即执行时,例如用于延迟加载内容或执行非关键任务的脚本。

3. async 和 defer 属性之间有什么区别?

  • async 属性指示浏览器立即下载脚本,并在下载完成后立即执行,即使页面其他部分尚未加载完成
  • defer 属性指示浏览器在页面其他部分加载完成后再下载和执行脚本。

4. 应该同时使用 async 和 defer 属性吗?

  • 一般情况下,不建议同时使用 async 和 defer 属性。
  • 如果你需要同时使用这两个属性,请确保你了解它们的含义和工作原理,并能够预测它们对脚本执行顺序的影响。

5. 浏览器是否都支持 async 和 defer 属性?

  • 并非所有浏览器都支持 async 和 defer 属性。
  • 在使用这两个属性之前,请确保你的目标浏览器支持它们。

希望这些信息能够帮助你更好地理解和使用 async 和 defer 属性!

✨ 正文

简介

asyncdefer 是两个用于控制 JavaScript 脚本加载和执行的属性。它们可以提高网页的性能和用户体验。

async 属性

async 属性指示浏览器立即下载脚本,并在下载完成后立即执行,即使页面其他部分尚未加载完成

defer 属性

defer 属性指示浏览器在页面其他部分加载完成后再下载和执行脚本。

使用场景

  • async 属性 适用于不依赖页面其他部分的脚本,例如分析脚本或广告脚本。
  • defer 属性 适用于依赖页面其他部分的脚本,例如初始化脚本或功能脚本。

代码示例

使用 async 属性

<script async src="script.js"></script>

使用 defer 属性

<script defer src="script.js"></script>

注意事项

  • 使用 async 属性时,脚本可能会在 DOMContentLoaded 事件触发之前执行。
  • 使用 defer 属性时,脚本将在 DOMContentLoaded 事件触发之后执行。
  • 并非所有浏览器都支持 async 和 defer 属性。

更多信息

  • Script async attribute: <移除了无效网址>
  • Script defer attribute: <移除了无效网址>

代码示例

使用 async 属性加载分析脚本

<script async src="analytics.js"></script>

使用 defer 属性初始化页面

<script defer src="init.js"></script>

 使用 async 和 defer 属性加载广告脚本

<script async src="ad1.js"></script>
<script defer src="ad2.js"></script>

 

✨ 结语

        asyncdefer 属性是两个用于控制 JavaScript 脚本加载和执行的属性。它们可以提高网页的性能和用户体验。

希望本文对你有所帮助!

以下是一些额外的建议:

  • 阅读 HTML 和 JavaScript 文档,以了解更多关于 async 和 defer 属性的信息。
  • 练习使用 async 和 defer 属性来实现不同的功能。
  • 在实际项目中使用 async 和 defer 属性。

祝你学习愉快!

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

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

相关文章

vtk三维场景基本要素 灯光、相机、颜色、纹理映射 简介

整理一下VTK 三维场景基本要素&#xff0c;后面会一一进行整理&#xff1b; 1. 灯光 vtkLight 剧场里有各式各样的灯光&#xff0c;三维渲染场景中也一样&#xff0c;可以有多个灯光存在。灯光和相机 是三维渲染场景必备的要素&#xff0c;vtkRenderer会自动创建默认的灯光和…

基于查询模板的知识图谱问答系统

目录 前言1 知识图谱问答系统的两个核心问题1.1 问句的表示与语义理解1.2 知识库的映射和匹配 2 问答基本流程2.1 模板生成2.2 模板实例化2.3 查询排序和结果获取 3 模板自动生成3.1 quint方法3.2 对齐任务 4 基于查询模板的知识图谱问答系统优缺点4.1 系统的优点4.2 系统的缺点…

阿里云游戏服务器租用费用价格组成,费用详单

阿里云游戏服务器租用价格表&#xff1a;4核16G服务器26元1个月、146元半年&#xff0c;游戏专业服务器8核32G配置90元一个月、271元3个月&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云游戏专用服务器详细配置和精准报价&#xff1a; 阿里云游戏服务器租用价格表 阿…

gem5学习(19):gem5内存系统——The gem5 Memory System

目录 一、Model Hierarchy 二、CPU 三、Data Cache Object 四、Tags & Data Block 五、MSHR and Write Buffer Queues 六、Memory Access Ordering 七、Coherent Bus Object 八、Simple Memory Object 九、Message Flow 1、Memory Access Ordering&#xff08;re…

C++ shell - 在线 C++ 编译器

C shell - 在线 C 编译器 1. C shell2. Example program3. Options4. ExecutionReferences 1. C shell C Shell v2 https://cpp.sh/ https://cpp.sh/about.html C Shell v2, free online compiler, proudly uses emscripten to compile your code. emscripten is a clang-ba…

【计算机网络】Web HTTP

Web和HTTP HTTP 超文本传输协议 HyperText Transfer Protocol HTTP使用TCP作为支撑传输协议 由一个客户程序和一个服务器程序实现一些常见名词。。。无状态协议 stateless protocol 不保存关于客户的任何信息非持续/持续链接 non-persistent con…

【数据结构】双向链表(链表实现+测试+原码)

前言 在双向链表之前&#xff0c;如果需要查看单链表来复习一下&#xff0c;链接在这里&#xff1a; http://t.csdnimg.cn/Ib5qS 1.双向链表 1.1 链表的分类 实际中链表的结构非常多样&#xff0c;以下情况组合起来就有8种链表结构&#xff1a; 1.1.1 单向或者双向 1.1.2 …

【开源】JAVA+Vue.js实现车险自助理赔系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 角色管理模块2.3 车辆档案模块2.4 车辆理赔模块2.5 理赔照片模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 角色表3.2.2 车辆表3.2.3 理赔表3.2.4 理赔照片表 四、系统展示五、核心代码5.1 查询车…

MySQL篇----第二十篇

系列文章目录 文章目录 系列文章目录前言一、NULL 是什么意思二、主键、外键和索引的区别?三、你可以用什么来确保表格里的字段只接受特定范围里的值?四、说说对 SQL 语句优化有哪些方法?(选择几条)前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍…

Nginx实战:1-安装搭建

目录 前言 一、yum安装 二、编译安装 1.下载安装包 2.解压 3.生成makefile文件 4.编译 5.安装执行 6.执行命令软连接 7.Nginx命令 前言 nginx的安装有两种方式&#xff1a; 1、yum安装&#xff1a;安装快速&#xff0c;但是无法在安装的时候带上想要的第三方包 2、…

微软 CMU - Tag-LLM:将通用大语言模型改用于专业领域

文章目录 一、前言二、主要内容三、总结 &#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、前言 论文地址&#xff1a;https://arxiv.org/abs/2402.05140 Github 地址&#xff1a;https://github.com/sjunhongshen/Tag-LLM 大语言模型&#xff08…

MYSQL分区NOW()不支持

传说同事写个复杂的SQL代码,跑一次需要7-10秒, 复杂如上,我也懒得去分析 IF IF IF是怎么回事了! 发现此表是分区表,后面要求加上了分区时间,以便利用到分区裁剪技术. 因为需求是查近10天来到期还款的人和金额.就是今天应该还款的人, 一般还款周期是7天. 给个10天的范围挺可以的…

计算机网络——07协议层次及服务模型

协议层次及服务模型 协议层次 网络是一个复杂的系统 网络功能复杂&#xff1a;数字信号的物理信号承载、点到点、路由、rdt、进程区分、应用等现实来看&#xff0c;网络的许多构成元素和设备&#xff1a; 主机路由器各种媒体的链路应用协议硬件&#xff0c;软件 问题是&am…

32MPU6050

MPU6050无SPI相关电路 硬件电路 ​编辑 MEMS说公司研发的微机电系统&#xff0c;可以用电子的方案进行姿态测量 芯片内部含有自由落体检测&#xff0c;运动检测和零运动检测 时钟源&#xff1a;内部晶振&#xff0c;陀螺仪晶振和外部时钟引脚的方波 运动检测有高通滤波器可…

「递归算法」:反转链表

一、题目 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]示例 3&#xff1a…

提升幸福感,中国的龙!理性看待个人发声——早读

打了过年球&#xff0c;爽&#xff01; 引言代码第一篇 人民日报 【夜读】新的一年&#xff0c;提升幸福感的6件小事第二篇 茶百道的广告文第三篇 人民日报 热搜第一&#xff01;《山河诗长安》&#xff0c;太燃了第四篇 人民日报 中国有真龙第五篇 人民日报 来啦 新闻早班车要…

C++ dfs 的状态表示(五十一)【第十一篇】

今天我们接着学习dfs&#xff08;状态表示&#xff09;。 1.抽象形式的dfs 前面用到的 DFS 算法都是比较容易想象出搜索过程的&#xff0c;接下来我们看一些不那么容易想象搜索过程的 DFS 过程&#xff0c;这些问题我们称为抽象形式的 DFS。 来回顾一下上节课遇到的一个问题&a…

vue对于安装依赖时不好习惯的反省

因为一个不好的习惯&#xff0c;我总是喜欢–save去安装依赖包&#xff0c;然后发现最后打包后的内容总是很大。就想着怎么能让包小一些&#xff0c;就发现我遗漏了vue安装依赖的一个小知识点 安装依赖的时候可以-s -d -g去安装&#xff0c;要根据使用的内容选择去安装&#xf…

【制作100个unity游戏之25】3D背包、库存、制作、快捷栏、存储系统、砍伐树木获取资源、随机战利品宝箱1(附带项目源码)

效果演示 文章目录 效果演示系列目录前言人物和视角基本控制简单的背包系统和物品交互绘制背包UI脚本控制 源码完结 系列目录 前言 欢迎来到【制作100个Unity游戏】系列&#xff01;本系列将引导您一步步学习如何使用Unity开发各种类型的游戏。在这第25篇中&#xff0c;我们将…

【实习】深信服防火墙网络安全生产实习

一、实习概况 1.1实习目的 1.掌握防火墙规则的作用2.掌握代理上网功能的作用3.掌握端口映射功能的作用 1.2实习任务 1.防火墙的WEB控制台 2.需要在防火墙上配置dnat …