JavaScript练手小技巧:一文看懂<script>标签的 ansyc 和 defer

news2024/11/15 11:05:10

<script>标签的 ansycdefer 属性。只对外部加载 JS 文件有效。

<script src="js/app.js"  async></script>
<script src="js/app.js"  defer></script>
  • 普通加载 js(同步加载):会打断 HTML 渲染。

  • ansyc:异步加载js。加载完毕就执行。如果,HTML 没渲染完毕,会打断 HTML 渲染。

  • defer:异步加载 js,但是要 HTML 渲染完毕才执行。推迟 JS 执行。

示例:写一个页面有 6000 个 div。对,6000 个~!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/app.js"  async></script>
</head>
<body>
    <div>0001</div>
    <div>0002</div>
    <!-- 6000 div,略。 -->
</body>
</html>

app.js

let a = document.querySelectorAll("div");
console.info( a.length );
  • 普通加载 js:会输出 0 。因为,js 很快下载完毕,并执行,但是此时,div 标签还没有开始渲染。

  • async:异步加载 js,加载完毕就会执行。每次执行的时候,div 渲染数量不一,所以每次输出都不一样。

  • defer:异步加载 js,但是要 HTML 渲染完毕才执行。因此输出 6000。

 所以,JS 代码的位置,个人建议放到 body 标签的最后,HTML内容的后面。

先加载 HTML 内容,后执行 JavaScript。可以保证 JavaScript 代码执行的时候,所需的 HTML 代码已经加载完毕,这样 JavaScript 代码就不会因为找不到标签,而报错。也不用纠结给 script 标签添加 defer 还是 ansyc 属性。

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

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

相关文章

uview2中上传文件和若依前后端分离配合的代码

uview2中的上传文件需要配合着自己后端的上传的代码 uview2 代码&#xff1a; uploadFilePromise(url) {return new Promise((resolve, reject) > {// 后续自己封装let a uni.uploadFile({//自己的请求路径url: that.$baseURL /uploadAvater, //上传的文件filePath: tha…

leetcode hot100 每日温度

在本题中&#xff0c;我们是通过单调栈来解决的&#xff0c;因为我们采用了栈的数据结构&#xff0c;并且&#xff0c;栈内存储的元素是单调的。 本题我们考虑&#xff0c;将气温数组元素的下标存入栈中&#xff0c;首先初始化要把0放入&#xff0c;0是下标的意思。然后我们拿…

诊所门诊电子处方软件操作教程及试用版下载,医务室处方笺管理系统模板教程

诊所门诊电子处方软件操作教程及试用版下载&#xff0c;医务室处方笺管理系统模板教程 一、前言 以下软件程序教程以 佳易王诊所电子处方软件V17.0为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 如上图&#xff0c;点击基本信息设置——处方配…

【JavaEE进阶】 代理模式

文章目录 &#x1f343;前言&#x1f38b;什么叫代理模式&#x1f334;静态代理&#x1f38d;动态代理&#x1f6a9;JDK动态代理&#x1f6a9;CGLIB动态代理 ⭕总结 &#x1f343;前言 前面对Spring AOP的详细使用进行了介绍&#xff0c;这篇博客博主将详细讲解一下Spring AOP…

使用统一功能完善图书管理系统

目录 一、前提 二、实现强制登陆传统方式 三、拦截器 1、概念 2、拦截器 &#xff08;1&#xff09;定义拦截器 &#xff08;2&#xff09;注册拦截器 &#xff08;3&#xff09;运行 3、使用拦截器实现强制登陆 4、DispatcherServlet源码解析 四、适配器模式 1、适…

深入剖析k8s-控制器思想

引言 本文是《深入剖析Kubernetes》学习笔记——《深入剖析Kubernetes》 正文 控制器都遵循K8s的项目中一个通用的编排模式——控制循环 for {实际状态 : 获取集群中对象X的实际状态期望状态 : 获取集群中对象X的期望状态if 实际状态 期望状态 {// do nothing} else {执行…

协议-http协议-基础概念03-http状态码-http特点-http性能-压缩和分块传输-范围请求

参考来源&#xff1a; 极客时间-透视HTTP协议(作者&#xff1a;罗剑锋)&#xff1b; 01-状态码分类 开头的 Version 部分是 HTTP 协议的版本号&#xff0c;通常是HTTP/1.1&#xff0c;用处不是很大。后面的 Reason 部分是原因短语&#xff0c;是状态码的简短文字描述&#xff…

【计算机网络_应用层】TCP应用与相关API守护进程

需要云服务器等云产品来学习Linux的同学可以移步/–>腾讯云<–/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;优惠多多。&#xff08;联系我有折扣哦&#xff09; 文章目录 1. 相关使用接口2. 代码实现2.1 日志组件2.2 Server端2.3 Client端2.3 bug解决 3. 守…

c语言数据结构(5)——栈

欢迎来到博主的专栏——C语言数据结构 博主id&#xff1a;代码小豪 文章目录 栈栈的顺序存储结构栈的插入空栈的初始化栈的删除判断空栈读取栈顶元素数据 实现顺序栈的所有代码栈的链式存储结构链式栈的初始化链式栈的入栈操作链式栈的出栈操作 实现链式栈的所有代码 栈 栈是…

[微服务]Eureka注册中心

目录 1、引言 2、Eureka的结构和作用 2.1、图解 2.2、几个重要问题⭐ 3、搭建eureka-server 3.1.创建eureka-server服务 3.2、引入eureka依赖 3.3、编写启动类 3.4、编写配置文件 3.5、启动服务 4、服务注册(user) 4.1、引入依赖 4.2、配置文件 4.3、启动多个use…

python--练习题

1.python是一种&#xff08; &#xff09;类型的编程语言 A.机器语言 B.解释 C.编译 D.汇编语言 答案&#xff1a;B 2.python语言print(中国&#xff0c;你好)的输出是&#xff08;&#xff09; A.(中国&#xff0c;你好&#xff09; B.中国&#xff0c;你好 C.中国&#xff0c…

【前端素材】推荐优质后台管理系统网页Star admin平台模板(附源码)

一、需求分析 1、系统定义 后台管理系统是一种用于管理和控制网站、应用程序或系统的管理界面。它通常被设计用来让网站或应用程序的管理员或运营人员管理内容、用户、数据以及其他相关功能。后台管理系统是一种用于管理网站、应用程序或系统的工具&#xff0c;通常由管理员使…

吴恩达机器学习全课程笔记第五篇

目录 前言 P80-P85 添加数据 迁移学习 机器学习项目的完整周期 公平、偏见与伦理 P86-P95 倾斜数据集的误差指标 决策树模型 测量纯度 选择拆分方式增益 使用分类特征的一种独热编码 连续的有价值特征 回归树 前言 这是吴恩达机器学习笔记的第五篇&#xff0c…

Redis 的 介绍 及 使用

redis 简介 简单来说 redis 就是一个数据库&#xff0c;不过与传统数据库不同的是 redis 的数据是存在内存中的&#xff0c;所以读写速度非常快&#xff0c;因此 redis 被广泛应用于缓存方向。另外&#xff0c;redis 也经常用来做分布式锁。redis 提供了多种数据类型来支持不同…

springboot3.x 以上,官方不建议使用spring.factories

springboot2.7.x 以上,官方不建议使用spring.factories 最近公司项目升级.需要将springcloud/springboot版本升级到2.7.x以上,再升级的过程中遇到了太多的问题.总结在了如下文章中: springboot艰难版本升级之路!! springboot 2.3.x版本升级到2.7.x版本 这篇文章就重点是梳理一…

npm digital envelope routines::unsupported

问题描述&#xff1a;npm运行命令报错&#xff1a;digital envelope routines::unsupported 原因&#xff1a;node版本过高 解决方案&#xff1a;在运行命令之前加上 SET NODE_OPTIONS--openssl-legacy-provider && SET NODE_OPTIONS--openssl-legacy-provider &&a…

vSphere资源管理

一 内存、CPU、资源池和vApp 内存部分&#xff1a; 关联VM内存 我们可以超额的关联内存给VM。例如&#xff1a;ESXI物理主机内存只有8G&#xff0c;但我们可以给三个VM都分配4G内存。 2.ESXI四大高级内存控制技术 a.Page sharing&#xff08;透明的页面共享&#xff09; 虚…

PYTHON 自动化办公:压缩图片(PIL)

1、介绍 在办公还是学习过程中&#xff0c;难免会遇到上传照片的问题。然而照片的大小限制一直都是个问题&#xff0c;例如照片限制在200Kb之内&#xff0c;虽然有很多图像压缩技术可以实现&#xff0c;但从图像处理的专业来说&#xff0c;可以利用代码实现 这里使用的库函数是…

【深度学习笔记】5_4 池化层

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 5.4 池化层 回忆一下&#xff0c;在5.1节&#xff08;二维卷积层&#xff09;里介绍的图像物体边缘检测应用中&#xff0c;我们构造卷…

python 使用curl_cffi 绕过jax3指纹-Cloudflare 5s盾

现在越来越多的网站已经能够通过JA3或者其他指纹信息&#xff0c;来识别你是不是爬虫了。传统的方式比如换UA&#xff0c;加代理是没有任何意义了&#xff0c;所以这个时候我们就需要使用到curl_cffi 了。 1.TLS 指纹是啥&#xff1f; 在绝大多数的网站都已经使用了 HTTPS&am…