script标签中defer和async的区别

如果没有defer或async属性,浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载。

js脚本网络加载时间,红色代表js脚本执行时间,绿色代表html解析。

defer 和 async属性都是去异步加载外部的JS脚本文件,它们都不会阻塞页面的解析,其区别如下:

  • 执行顺序: 多个带async属性的标签,不能保证加载的顺序;多个带defer属性的标签,按照加载顺序执行;

  • 脚本是否并行执行:*async属性,表示*后续文档的加载和执行与js脚本的加载和执行是并行进行的,即异步执行;defer属性,加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步),js脚本需要等到文档所有元素解析完成之后才执行,DOMContentLoaded事件触发执行之前。

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

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

相关文章

每日OJ题_两个数组dp⑥_力扣97. 交错字符串

目录 力扣97. 交错字符串 解析代码 力扣97. 交错字符串 97. 交错字符串 难度 中等 给定三个字符串 s1、s2、s3,请你帮忙验证 s3 是否是由 s1 和 s2 交错 组成的。 两个字符串 s 和 t 交错 的定义与过程如下,其中每个字符串都会被分割成若干 非空 子…

day21-二叉树part08

235. 二叉搜索树的最近公共祖先 相对于 二叉树的最近公共祖先 本题就简单一些了,因为 可以利用二叉搜索树的特性无需全部遍历。特点:当前节点在p,q节点之前则必为最近公共祖先 class Solution {public TreeNode lowestCommonAncestor(TreeNo…

Leetcode面试经典150_Q80删除有序数组中的重复项 II

题目: 给你一个有序数组 nums ,请你 原地 删除重复出现的元素,使得出现次数超过两次的元素只出现两次 ,返回删除后数组的新长度。 不要使用额外的数组空间,你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件…

C# WinForm —— 06 常用控件

公共控件功能Label标签,UI上的提示性文字TextBox文本框RadioButton单选按钮CheckBox复选框ComboBox下拉框,只能选择一个选项CheckedListBox带复选框的列表项,可以选择多个选项的下拉菜单DateTimePicker日期时间选择控件ListBox列表框ListView…

C++ 学习笔记

文章目录 【 字符串相关 】C 输入输出流strcpy_s() 字符串复制输出乱码 【 STL 】各个 STL 支持的常见方法 ? : 运算符switch case 运算符 switch(expression) {case constant-expression :statement(s);break; // 可选的case constant-expression :statement(s);break; //…

HarmonyOS实战开发-如何实现电话服务中SIM卡相关功能

介绍 本示例使用sim相关接口,展示了电话服务中SIM卡相关功能,包含SIM卡的服务提供商、ISO国家码、归属PLMN号信息,以及默认语音卡功能。 效果预览 使用说明: 1.若SIM卡槽1插入SIM卡则SIM卡1区域显示为蓝色,否则默认…

创建个人百度百科需要什么条件?

互联网时代,创建百度百科词条可以给个人带来更多的曝光和展现,相当于一个镀金的网络名片,人人都想上百度百科,但并不是人人都能创建上去的。 个人百度百科词条的创建需要满足一定的条件,今天伯乐网络传媒就来给大家聊聊…

P1123 取数游戏(dfs算法)

题目描述 一个 NM 的由非负整数构成的数字矩阵,你需要在其中取出若干个数字,使得取出的任意两个数字不相邻(若一个数字在另外一个数字相邻 8个格子中的一个即认为这两个数字相邻),求取出数字和最大是多少。 输入格式 第…

关联式容器——map和set详解

troop主页 今日鸡汤:Never bend your head.Always hold it high.Look the world straight in the face. 加油!成为最好的编程大师 前言 我们前几篇文章讲了搜索二叉树,我们提到了搜索二叉树的应用就是K结构和KV结构,今天我们要提…

Vue3中的computed,watch和watchEffect的特点

1.computed 1)computed拥有缓存性,多次调用会直接从缓存中获取,而不会重新执行,只有相依赖的数据发生改变才会重新计算,所以说computed性能很高。 例:下面是同时调用三次计算属性firstTotal和三次函数first…

扬帆出海扩规模,仍是比亚迪未来的发展关键?

又到了新能源车企公布阶段性成果的时期。 日前,乘联会预估2024年3月全国新能源乘用车厂商批发销量82万辆,同比增长33%,环比增长84%。其中,比亚迪继续领跑,3月销量超30万辆,环比增长147.8%,而这…

ABAP 的 AT NEW 语法

AT NEW一般用在LOOP里面。 当我们在LOOP里面处理数据的时候,经常要执行的是当一个字段值改变了,然后我们怎么怎么做。这个就是要用AT NEW。其实有点像分组。 解释起来就是,我有一个内表itab里面有很多行数据,我现在一条一条的lo…

简单用Nodejs + express 编写接口

文章目录 get接口示范post接口示范注意点 准备工作可以看上一篇文章:文章链接》》 get接口示范 app.get(/, (req, res) > {res.send("Hello World"); })因为是get接口,所以可以直接在浏览器上请求(端口地址接口名)…

测开面经(Git经典题目,Git入门)

1. GitHub是什么 a. Git是一个分布式版本控制系统,作用是跟踪、管理和协调软件开发项目中的代码更改。 b. 提供了一种有效的方式来管理代码的版本历史,以及多人协作开发的能力。 2. Git的作用有哪些 a. 版本控制:Git可以记录每次代码更改的…

基于51单片机轮胎胎压监测系统—数码管显示

基于51单片机轮胎胎压监测系统 (仿真+程序+设计报告) 功能介绍 具体功能: 1.MPX4115压力传感器胎压检测; 2.ADC0832进行模数转换后,51单片机处理控制; 3.数码管显示胎压&#xff…

想要品牌传播有效,先清楚这三个本质问题

在互联网时代,企业想要提高市场竞争力就需要做好品牌传播。然而有许多企业在做品牌传播时都会踩坑,原因是因为忽视了这三点,接下来就让媒介盒子和大家分享: 一、 文案本质是“购买理由” 在文案技巧中经常会出现一些词&#xff…

1. TypeScript: JavaScript 的超集,为大型应用而生

引言 在现代的前端开发领域,JavaScript 无疑是一门极其流行的语言。然而,随着前端项目的日益复杂,JavaScript 本身的一些特性使得维护和扩展大型代码库变得困难。这就是 TypeScript 应运而生的背景。TypeScript 是一种由微软开发的开源语言&…

java中如何使用Rabbitmq?

1、添加相关的依赖 在Java中使用RabbitMQ,你需要先确保RabbitMQ服务器已经安装并运行在你的机器上或者某个服务器上。然后,你需要在Java项目中添加RabbitMQ的Java客户端库作为依赖。对于Maven项目,你可以在pom.xml文件中添加以下依赖&#x…

SSL的起源和发展史

随着网络技术的发展,当前各大浏览器厂商都对尚未使用SSL证书,切换到HTTPS的网站做了风险预警。SSL证书的如此重要,你了解SSL证书的诞生和发展史吗?跟随本文一起来了解SSL的前世今生。 SSL协议的诞生 Netscape(网景通…

uniapp 表单使用Uview校验 包括城市选择器

<view><!-- 注意&#xff0c;如果需要兼容微信小程序&#xff0c;最好通过setRules方法设置rules规则 --><u--form labelPosition"left" :model"model1" :rules"rules" ref"uForm" labelWidth"174"><u…