JavaScript练手小技巧：一文看懂＜script＞标签的 ansyc 和 defer

已于 2024-03-02 16:37:14 修改
阅读量395 收藏 7
点赞数 8
分类专栏： javascript 文章标签： javascript 前端 java
于 2024-03-02 16:36:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42703239/article/details/136418053
版权

<script>标签的 ansyc 和 defer 属性。只对外部加载 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 属性。

stones4zd
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
async、await详解
Zheng_xinle的博客
09-07 7万+
一、async/await是什么？ 简而言之， async用于申明一个function是异步的； 而await则可以认为是 async await的简写形式，是等待一个异步方法执行完成的。 二、async和await的基础使用 async/awiat的使用规则: async 表示这是一个async函数， await只能用在async函数里面，不能单独使用 async 返回的是一个Promise对象，await就是等待这个promise的返回结果后，再继续执行 await 等待的是一个Promise对象
异步函数async
baidu_39009276的博客
08-22 9387
异步函数async
Async 详解
服务器端攻城师
03-20 2万+
一：流程控制 为了适应异步编程，减少回调的嵌套，我尝试了很多库。最终觉得还是async最靠谱。 地址：https://github.com/caolan/async Async的内容分为三部分： 流程控制：简化十种常见流程的处理集合处理：如何使用异步操作处理集合中的数据工具类：几个常用的工具类 本文介绍其中最简单最常用的流程控制部分。 由于nodejs是异步编程模型，有一些在同
async/await的使用以及注意事项
热门推荐
OrangeJ
12-29 7万+
使用 async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性. 本文介绍 async / await 的基本用法和一些注意事项.await引用MDN的介绍: await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用. await 的使用语法非常简单:[return_valu
javascript之异步操作理解---回调函数，async，await以及promise对象
qq_44774831的博客
06-10 3745
javascript之异步操作理解---回调函数，async，await以及promise对象概述 概述 写在前面：虽然平时做项目，但是发现自己写的代码还是很烂。最近接触了一个对性能要求比较高的项目，于是重新开始审视自己写的代码是不是达到尽量较小系统性能了。加上前几天学到express框架了解到了回调函数的操作。作为拓展，查了许多资料，再次总结一下javascript的异步操作。 javascript是一门单线程语言,即一次只能完成一个任务,若有多个任务要执行,则必须排队按照队列来执行(前一个任务完成,
JS中script标签defer和async属性的区别详解
10-21
主要介绍了JS中script标签defer和async属性的区别详解的相关资料,需要的朋友可以参考下
浅析script标签中的defer与async属性
01-21
一、前言 ...先看看async和defer各自的定义吧，翻开红宝书望远镜，是这么介绍的 2.1 defer 这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行
HTML5 script元素async、defer异步加载使用介绍
09-28
HTML5的`<script>`元素引入了两个重要的属性：`async`和`defer`，这两个属性主要用于异步加载JavaScript文件，以减少页面加载时的阻塞，提高用户体验。在过去，开发者通常需要通过复杂的JavaScript技巧来实现类似的...
JS script脚本中async和defer区别详解
10-15
在JavaScript的世界里，`async` 和 `defer` 是两个在`<script>`标签中用于控制脚本加载和执行方式的关键属性。它们主要用来解决脚本阻塞页面渲染的问题，确保网页的加载性能和用户体验。下面将详细讲解这两个属性的...
async
CrystalLee
09-04 399
一、知识点： 1、async 函数 ： 是 Generator 函数的语法糖 2、async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。 3、示例 async function getStockPriceByName(name) { const symbol = ...
async函数
过客如期的博客
02-17 1万+
一，
async的基础用法,解决异步问题
裤兜的博客
10-29 1400
async基础用法 1. async函数,会返回一个promise对象,可以用.then调用async函数中return的结果. 例: async function helloAsync() { return "返回结果"; } console.log(helloAsync()) // 输出Promise对象: Promise {<fulfilled>: '返回结果'} helloAsync().then(v => { con
async...await用法全解
一只小绵羊
09-04 2万+
async...await用法全解
Async 的用法
yzkdcsdn的博客
11-15 7886
Async 的用法Async的作用Async的使用步骤 Async的作用 async 用于声明一个 function 是异步的，而 await 用于等待一个异步方法执行完成，async 返回的是一个Promise 对象。 async 的主要作用是回调地狱的处理看起来比 Promise 更美观，而且使用 async 来 传参的时候比较方便。 async 函数必须要等到方法体中所有的 await 声明 Promise 函数执行完后， async 函数才会得到一个resolve 状态的 Promise 对象。
ES6系列教程第四篇--asyn详解
恰恰虎的博客
06-02 1万+
一、什么是async     async其实是ES7的才有的关键字，放在这里说，其实是和我们前面所说的Promise，Generator有很大关联的。async的意思是"异步"，顾名思义是有关异步操作有关的关键字。下面我们就来构造一个async方法。 async function helloAsync(){   return "helloAsync";   }   console.log...
Python异步ansyc/await概念、用法
漫步量化
04-12 733
异步、同步、阻塞、非阻塞 《编程中的异步、同步、阻塞、非阻塞、并行、并发、回调概念》 IO 同步异步、阻塞非阻塞，都是围绕着IO展开的概念。 多线程和多进程的模型虽然解决了并发问题，但是系统切换线程的开销也很大。 一种解决IO问题的方法是异步IO。当代码需要执行一个耗时的IO操作时，它只发出IO指令，并不等待IO结果，然后就去执行其他代码了。一段时间后，当IO返回结果时，再通知CPU进行处...
@Async
BryantLmm的博客
11-27 4086
在开发过程中，我们有很多的业务场景都会遇到使用线程池的情况，例如定时任务使用的就是ScheduledThreadPoolExecutor。而有些时候使用线程池的场景就是会将一些可以进行异步操作的业务放在线程池中去完成，例如在生成订单的时候给用户发送短信，生成订单的结果不应该被发送短信的成功与否所左右，也就是说生成订单这个主操作是不依赖于发送短信这个操作，所以我们就可以把发送短信这个操作置为异步操作...
@Async异步线程池以及线程的命名
hhsway的博客
08-25 2万+
本文记录@Async的基本使用以及通过实现ThreadFactory来实现对线程的命名。   @Async的基本使用   近日有一个道友提出到一个问题，大意如下： 业务场景需要进行批量更新，已有数据id主键、更新的状态。单条更新性能太慢，所以使用in进行批量更新。但是会导致锁表使得其他业务无法访问该表，in的量级太低又导致性能太慢。 龙道友提出了一个解决方案，把要处理的数据分成几个li...
<script>标签
最新发布
03-15
<script>标签是HTML中用于插入JavaScript代码的标签。通过在<script>标签中编写JavaScript代码，可以实现网页的动态效果和交互功能。以下是一些关于<script>标签的介绍： 1. 插入位置：可以将<script>标签放置在HTML文档的<head>或<body>部分，用于在页面加载时执行脚本或在特定事件触发时执行脚本。 2. 外部脚本：可以使用<script>标签引入外部的JavaScript文件，通过src属性指定外部文件的路径。例如：<script src="script.js"></script>。 3. 内联脚本：可以直接在<script>标签内编写JavaScript代码，不需要引入外部文件。例如：<script>alert("Hello, World!");</script>。 4. 事件处理：可以在<script>标签中编写事件处理函数，用于响应用户的操作或页面的事件。例如：<script>function handleClick() { alert("Button clicked!"); }</script>。 5. 异步加载：可以使用async或defer属性来控制脚本的加载和执行方式。async属性表示脚本异步加载，不会阻塞页面的渲染；defer属性表示脚本延迟加载，会在文档解析完毕后执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值