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,一经查实,立即删除!

相关文章

学习数据结构和算法的第5天

空间复杂度及其常见案例 空间复杂度 空间复杂度也是一个数学函数表达式&#xff0c;是对一个算法在运行过程中临时占用存储空间大小的量度。 空间复杂度不是程序占用了多少bytes的空间&#xff0c;因为这个也没太大意义&#xff0c;所以空间复杂度算的是变量的个数。空间复杂度…

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…

深入浅出:MongoDB聚合管道的技术详解

随着数据量的不断增加&#xff0c;对于数据的有效查询和分析变得愈发重要。MongoDB作为一款高性能的NoSQL数据库&#xff0c;提供了强大的聚合管道&#xff08;Aggregation Pipeline&#xff09;功能&#xff0c;帮助开发者轻松地实现复杂的数据分析任务。本文将深入剖析聚合管…

Nginx 禁用静态文件缓存

在 Nginx 中完全禁用缓存静态文件&#xff0c;在 Nginx 的配置文件中&#xff0c;找到处理静态文件的 /location 配置块&#xff0c;如下&#xff1a; location / { root /path/to/static/files; ... } 在该配置块中&#xff0c;可以添加以下指令来禁用缓存&#xff1…

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

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

技术精英求职必备:Android开发工程师简历制作全指南

简历编写核心原则 撰写针对安卓开发工程师职位的简历时&#xff0c;关键在于准确展示您在使用Android SDK进行应用开发、界面设计和性能优化方面的专业技能、项目经验和技术成就。简历应突出您的Android编程能力、对Kotlin和Java的熟练运用&#xff0c;以及在移动应用开发领域…

【开源】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 查询车…

《Django+React前后端分离项目开发实战:爱计划》 01 项目整体概述

01 Introduction 《Django+React前后端分离项目开发实战:爱计划》 01 项目整体概述 Welcome to Beginning Django API wih React! This book focuses on they key tasks and concepts to get you started to learn and build a RESTFul web API with Django REST Framework,…

ubuntu22.04@laptop OpenCV Get Started: 006_annotating_images

ubuntu22.04laptop OpenCV Get Started: 006_annotating_images 1. 源由2. line/circle/rectangle/ellipse/text 应用Demo3 image_annotation3.1 C应用Demo3.2 Python应用Demo3.3 重点过程分析3.3.1 划线3.3.2 画圆3.3.3 矩形3.3.4 椭圆3.3.5 文字 4. 总结5. 参考资料 1. 源由 …

mysql索引的概念以及数据结构

索引的概念&#xff1a; 目的和作用&#xff1a; MySQL索引是一种数据结构&#xff0c;用于加速数据库查询操作。它类似于书籍的目录&#xff0c;可以快速定位到所需的数据&#xff0c;而不必全表扫描。 工作原理&#xff1a; 当你在表上创建索引时&#xff0c;MySQL会在索引中…

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天的范围挺可以的…

从零开始学howtoheap:fastbins的double-free攻击实操1

how2heap是由shellphish团队制作的堆利用教程&#xff0c;介绍了多种堆利用技术&#xff0c;后续系列实验我们就通过这个教程来学习。环境可参见从零开始配置pwn环境&#xff1a;优化pwn虚拟机配置支持libc等指令-CSDN博客 1.fastbins的double-free攻击 下面的程序展示了fast…