彻底理解 async 和 defer 属性的作用及应用场景

彻底理解 async 和 defer 属性的作用及应用场景

  • 默认HTML 中 script 标签的属性和加载顺序
  • script 标签增加 async 属性后
  • script 标签增加 defer 属性后
  • async 和 defer 属性应用场景对比

默认HTML 中 script 标签的属性和加载顺序

  • script 标签默认是阻塞加载的,也就是先下载src内容,然后执行src内容,然后再往后读文档
  • head 标签中的 script 标签按顺序加载执行,然后再加载 body 标签的元素。
  • script 标签移到文档最后,就会先加载body标签中的内容,再按顺序加载执行script标签中的内容,此时页面看上去会更快一些。

script 标签增加 async 属性后

  • 当浏览器遇到带有 async 属性的 script 标签时,浏览器立即开始下载脚本文件,但不会阻止 HTML 解析过程。
  • 脚本文件下载完成后,浏览器会立即执行该脚本,此时不管 HTML 是否已经解析完成。
  • 如果当前页面有多个带有 async 属性的脚本文件,浏览器会立即下载这些脚本文件,下载完成后立即执行。
    • 注意:多个脚本文件可能会以不确定的顺序执行,因为这些脚本文件下载完成的顺序可能不同,下载完成后立即执行。
  • async 属性主要适用于独立的脚本,不依赖于页面其他内容的加载顺序,且无需等待 HTML 解析完毕即可执行的情况。

script 标签增加 defer 属性后

  • 当浏览器遇到带有 defer 属性的 script 标签时,立即开始下载脚本文件,但会延迟脚本的执行,直到 HTML 解析完成后再执行。
  • 多个带有 defer 属性的脚本文件会按照它们在页面中出现的顺序依次执行。
  • async 不同,defer 会保证脚本文件按在文档中script标签顺序执行,并且会在文档解析完成后执行。
  • 适用于需要等待文档解析完成后并需要按顺序执行的脚本。

async 和 defer 属性应用场景对比

  • 若脚本与其他script脚本及页面HTML元素无关,并且可独立运行,可使用 async属性以尽快地下载和执行脚本。
  • 若脚本依赖于页面的结构,需要等待 HTML 解析完成,可以使用 defer 先下载,然后等html解析完成后执行。(或者将脚本放在 body标签 结尾处,可达到同样的效果)。

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

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

相关文章

掌握Ansible命令——提高自动化运维效率

目录 一、Ansible命令 1.定义 2.组成 3.命令格式 4.选项 5.示例 二、常用命令解释 1.ansible-doc 2.ansible-galaxy 3.ansible-playbook 4.ansible-pull 5.ansible-vault 三、高频使用的命令 1.Ping主机 2.执行命令 3.安装软件包 4.管理文件 5.管理服务 6.获…

List的两种实现

前置知识: 数组 baseAddress:数组的首地址 dataTypeSize:数组中元素类型的大小,如int为4字节 为什么数组索引从0开始,假如从1开始不行吗? 在根据数组索引获取元素的时候,会用索引和寻址公式来计…

Spring Cloud 版本简介

SpringCloud发布版本约定 WIKI:发布火车命名约定 spring-cloud/spring-cloud-release 维基 GitHub上 在2020年之前,使用Release Train命名风格: Spring Cloud的Release Train版本号规则:v{伦敦地铁站的英文单词}{SR/M/RC}{数字…

JAVA随记——集合篇

注意:作者之前的Java基础没有打牢,有一些知识点没有记住,所以在学习中出现了许多零散的问题。现在特地写一篇笔记总结一下,所以有些知识点不是很齐全。 集合中各类名词的关系 Collection集合为单列集合。 集合存储数据类型的特点…

森林消防—高扬程水泵,高效、稳定、可靠!/恒峰智慧科技

森林,作为地球的“绿色肺叶”,不仅为我们提供了丰富的自然资源,更是维持生态平衡的重要一环。然而,随着全球气候的变化和人为活动的增加,森林火灾频发,给生态环境和人民生命财产安全带来了巨大威胁。在森林…

与时代同行,Build with AI 2024 线下活动五月再次开放报名

技术开发日新月异,软硬件迭代和应用场景多样化对开发者提出了更多挑战。面对科技发展潮流,GDG (谷歌开发者社区) 一直秉承开放共创的精神,以热忱之心与开发者们一同探索 AI 的广阔发展前景。 在过去的四月里,我们在北京、上海、深…

厉害x3 PUA到自己都信了

这些天抖音一直刷到某副总裁的Vlog。厉害x3 PUA到自己都信了。只能说这个高管确实有些本事,我也会很欣赏,但是最让我不可思议的是网友的评论产生了分歧。我只能说怎么会有人把PUA当饭吃的? 你去企业上班的初心究竟是什么?在企业里…

php使用服务器端和客户端加密狗环境部署及使用记录(服务器端windows环境下部署、linux环境宝塔面板部署、客户端部署加密狗)

php使用服务器端和客户端加密狗环境部署及使用记录 ViKey加密狗环境部署1.windows环境下部署开发文档验证代码提示Fatal error: Class COM not found in 2.linux环境下部署(宝塔面板)开发文档验证代码提示Fatal error: Uncaught Error: Call to undefine…

加速乐 js解混淆 __jsl_clearance_s生成

提示!本文章仅供学习交流,严禁用于任何商业和非法用途,未经许可禁止转载,禁止任何修改后二次传播,如有侵权,可联系本文作者删除! 目标网站 aHR0cHM6Ly9jcmVkaXQuaGVmZWkuZ292LmNuL2NyZWRpdC13…

使用npm script运行webpack

npm(Node Package Manager)是 Node.js 的包管理工具,用于安装、发布和管理 Node.js 包。 在安装node的时候,就默认安装了npm。 Npm Script 则是 Npm 内置的一个功能,允许在 package.json 文件里面使用 scripts 字段定…

聚观早报 | 比亚迪首款新能源皮卡;苹果M4芯片有望登场

聚观早报每日整理最值得关注的行业重点事件,帮助大家及时了解最新行业动态,每日读报,就读聚观365资讯简报。 整理丨Cutie 5月8日消息 比亚迪首款新能源皮卡 苹果M4芯片有望登场 红旗首款手机外观揭晓 一加13设计细节曝光 长城汽车4月销…

matlab 基于拉依达检验法(3σ准则) 实现多类别多参数的批量异常样本检验 V2.0

简介 拉依达检验法(3σ准则)是一种统计学方法,用于检测数据中的异常值。这种方法基于正态分布的特性来确定数据点是否可能是异常值。以下是关于拉依达检验法(3σ准则)的详细介绍: 基本原理: 拉…

Electron项目中将CommonJS改成使用ES 模块(ESM)语法preload.js加载报错

问题 将Electron项目原CommonJS语法改成使用ES 模块(ESM)语法,preload.js一直加载不到,报错如下: VM111 renderer_init:2 Unable to load preload script: D:\Vue\wnpm\electron\preload.js VM111 renderer_init:2 E…

3D相机及应用

无论是2D相机和3D相机,在工业应用中都有着不可或缺的作用。3D相机与2D相机的最大区别在于,3D相机可以获取真实世界尺度下的3D信息,而2D相机只能获取像素尺度下的2D平面图像信息。通过3D相机得到的数据,我们可以还原出被测量物体的…

FX110书籍推荐:如何快速成为一名专业股票投资人?

股票投资领域有一本神作《股票交易入门》,它是股票从业人员的入门必备书籍。 关于股票入门的书籍很多,但这本书涉及的知识面最全、实用性最强。从这本书里,我们可以领略到股票交易世界的跌宕起伏而又波澜壮阔的魅力。本书作者 本书的作者是美…

Android studio 打开Device Mirroring方便调试

巧合下发现一个很好用的工具,在平时调试真机的时候在每次run app后都要低头找找手机看看效果。但是,用了AS上的Device Mirroring,你会发现根本不需要再低头点手机,调试方便一万倍啊。 话不多说,上图。直接就可以在电脑…

第二篇【传奇开心果系列】Python深度学习库技术点案例示例:深度解读深度学习在语音助手方面的应用

传奇开心果博文系列 系列博文目录Python深度学习库技术点案例示例系列 博文目录前言一、深度学习在语音助手方面的应用介绍二、语音识别示例代码三、语义理解示例代码四、对话生成示例代码五、个性化服务示例代码六、多模态交互示例代码七、情感识别示例代码八、知识点归纳 系列…

sql中select查询大数据量表时很慢

有一张表table1数据量大概130万,查询sql如下: select count(*) from( select distinct a.example_id,a.plan_id,a.trustor_id from table1 a where DEL_STATUS0 and (example_id,1,2) in(...) and plan_id in(...) ) 查询花了将近40秒钟,结…

车间移动环保空调降温通风设备

移动环保空调的特点主要体现在以下几个方面: 环保节能:移动环保空调通常采用水冷技术,无需使用化学制冷剂,符合环保要求。同时,其高效节能的设计能有效降低能耗,节约能源。快速降温:移动环保空…

图搜索算法 - 拓扑排序

相关文章: 数据结构–图的概念 图搜索算法 - 深度优先搜索法(DFS) 图搜索算法 - 广度优先搜索法(BFS) 拓扑排序 概念 几乎所有的工程都可分为若干个称作活动的子工程,而这些子工程之间,通常受…