JS script脚本中async和defer区别详解

一 引言

代码如下

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

可以看到在script标签中，存在async与defer两个属性，首先这两个属性并共存，说直白点，你一个都不加，或者加两个属性其一，脚本加载规则都会不同，这点我在之前确实没仔细了解过，导致我在实际开发中遇到了这样一个问题：

我在同一个页面需要引用2个script脚本，大致如下：

<script src="https://www.google.com/recaptcha/api.js"></script>
<script src="demo.js"></script>

注意，两个script脚本都没有添加async与defer属性，demo.js中包含了谷歌人机验证的初始化程序，正常来说一定得先加载必要的资源，这样我的验证码才能初始化成功，这就像使用jQuery得先引用jQuery.js是一个道理。

但事实上，因为外网的问题，api.js引用虽然在前面，但下载并不稳定，有时候会出现下载反而比demo.js更晚的情况，这就导致demo.js中的初始化报错，怎么办呢？这就得async与defer出场了，我们先来了解它们的区别。

二 属性async、defer与不加的区别

1 不加属性

引用script脚本，最常见的就是直接引用，不加其它属性，这种情况浏览器会立即下载并执行指定的脚本，一气呵成，脚本不执行完毕，后面的DOM加载全部给我候着，如下图：

2 属性async

了解ajax的同学对于async这个词一定不陌生，它表示异步，如果script脚本添加了此属性，浏览器会异步下载后立刻同步执行脚本。

说通俗点，脚本下载是异步行为，下载过程中并不影响DOM加载，但一旦脚本下载完毕就会立刻同步执行脚本，此时DOM加载还是得给我等着。如下图：

3 属性defer

与async一样属于异步下载脚本，但不同的地方是，脚本下载完成后并不会立刻执行，而是等到DOM解析完成才会执行脚本，相比async的粗暴，defer明显更加实用。加载顺序如下图：

现在我们知道了脚本属性async、defer以及不加的区别，回到文章开始的问题，我希望api.js一定在demo.js之前加载完成，不管需要等多久，所以我们可以这样修改：

<script src="https://www.google.com/recaptcha/api.js" async></script>
<script src="demo.js" defer></script>

那么到这里本文正式结束。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS中async/await实现异步调用的方法

    async/await多个函数关联调用 async/await使得异步代码看起来像同步代码 async函数会隐式地返回一个promise,而promise的reosolve值就是函数return的值 Async/Await不需要写.then,不需要写匿名函数处理Promise的resolve值,也不需要定义多余的data变量,还避免了嵌套代码 async声明一个异步函数 await只能在async函数中使用,后面跟一个promise对象 所以在模拟异步调用函数时,函数体内返回promise as

  • 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异步脚本"的作用.然而,以defer为例,一些细节问题可能开发者却并不一定熟悉,比如:有了defer特性的脚本会延迟到什么时候执行:内部脚本和外部脚本是不是都能够支持defer:defer后的脚本除了会延迟执行之外,还有哪些特殊的地方等等.本文结合已有的一些文章以及MDN文档中对两个特性的阐述,对de

  • nodejs使用async模块同步执行的方法

    nodejs使用async模块同步执行的方法

    首先安装 模块async 测试代码: call.js exports.fun1 = function (callback) { setTimeout(function(){ console.log('方法1'); callback('1'); },1900); } exports.fun2 = function (callback) { setTimeout(function(){ console.log('方法2'); callback('2'); },1700); } exports.fun

  • 深入理解js 中async 函数的含义和用法

    一.终极解决 异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题. 从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底.它们都有额外的复杂性,都需要理解抽象的底层运行机制. 异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步编程的最高境界,就是根本不用关心它是不是异步. async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案. 二.async 函数是什么? 一句话,

  • JS async 函数的含义和用法实例总结

    本文实例讲述了JS async 函数的含义和用法.分享给大家供大家参考,具体如下: 学习老师最后一篇文章并做总结, 前面我们认识了各种异步编程方式:回调函数,Promise对象,Generator函数, 再到两种自动执行方式:Thunk,co 好像我们为了更好的解决异步编程做了很多事情, 但是这也说明了一个问题 就是目前仍是的异步编程都有或多或少的问题,才导致我们要找对应的解决方案 今天我们仍是最后的大招:async 这个关键字在哪里见到来着? 我们可以给script标签添加 async 属性来

  • JS中script标签defer和async属性的区别详解

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

  • js的[defer]和[async]属性

    [defer] 可以在<script>中加入defer属性,告诉浏览器这段script不必立即执行,那么浏览器就会在完全载入文档之后再执行这个script,相当于window.onload,但它比window.onload更灵活. 复制代码 代码如下: <script defer="true"></script> [async] 使用async属性加载JavaScript,这样整个脚本就可以异步加载和执行. <script>标签的defe

  • JavaScript无阻塞加载和defer、async详解

    JavaScript无阻塞加载和defer、async详解

    无阻塞加载 把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题.但是少部分新的浏览器已经开始允许并行加载js了,也就是说可以同时下载js文件,但是还是按先后顺序执行文件的. 下载是异步的没问题,但是每个javascript执行的时候还是同步的,就是先出现的script标签一定是先执行,即使是并行下载它是最后一个下载完成的,除非标有defer的script标签.任何javascript在执行的时

  • 关于Javascript中defer和async的区别总结

    关于Javascript中defer和async的区别总结

    首先来看看这三句话: <script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,"立即"指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行. <script async src="script.js"></script> 有 async,加载和渲染后续文档元素的过程将和

  • JS script脚本中async和defer区别详解

    一 引言 代码如下 <script src="https://www.google.com/recaptcha/api.js" async defer></script> 可以看到在script标签中,存在async与defer两个属性,首先这两个属性并共存,说直白点,你一个都不加,或者加两个属性其一,脚本加载规则都会不同,这点我在之前确实没仔细了解过,导致我在实际开发中遇到了这样一个问题: 我在同一个页面需要引用2个script脚本,大致如下: <scr

  • 基于js 字符串indexof与search方法的区别(详解)

    基于js 字符串indexof与search方法的区别(详解)

    1.indexof方法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 语法: 注意:有可选的参数(即设置开始的检索位置). 2.search方法 search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串. 注意:search方法可以根据正则表达式查找指定字符串(可以忽略大小写,并且不执行全局检索),同时没有可选参数(即设置开始的检索位置). 以上这篇基于js 字符串indexof与search方法的区别(详解)就是小编分享给大家的全部

  • linux shell中“.” 和 “./”执行的区别详解

    目前注意到的区别主要在于环境变量的作用域上: 1. 如果使用" ./ " 执行,可以理解为程序运行在一个全新的shell中,不继承当前shell的环境变量的值, 同时若在程序中改变了当前shell中的环境变量(不使用export),则当前shell的环境变量值不变. 2. 如果使用" . "执行,则程序继承当前shell中的环境变量,同时,若在程序中改变了当前shell中的环境变量(不使用export),则当前shell中该环境变量的值也会改变 另外一个区别点在于,

  • Java中 % 与Math.floorMod() 区别详解

    %为取余(rem),Math.floorMod()为取模(mod) 取余取模有什么区别呢? 对于整型数a,b来说,取模运算或者取余运算的方法都是: 1.求 整数商: c = a/b; 2.计算模或者余数: r = a - c*b. 区别是: 取余运算在计算商值向0方向舍弃小数位 取模运算在计算商值向负无穷方向舍弃小数位 比如a=4,b=-3时,a/b = -1.3333... 此时,取余c=1,取模c=-2 (%在不同语言中有不同的意义,比如Java或者c/c++中%为取余,python中%则为

  • MySQL中in和exists区别详解

    MySQL中in和exists区别详解

    一.提前准备 为了大家学习方便,我在这里面建立两张表并为其添加一些数据. 一张水果表,一张供应商表. 水果表 fruits表 f_id f_name f_price a1 apple 5 a2 appricot 2 b1 blackberry 10 b2 berry 8 c1 cocount 9 供应商表 suppliers表 s_id s_name 101 天虹 102 沃尔玛 103 家乐福 104 华润万家 我们将用这两张表做演示. 二.什么是exists exists关键字后面的参数是一

  • Vue2.x与Vue3.x中路由钩子的区别详解

    Vue2.x与Vue3.x中路由钩子的区别详解

    目录 vue2.x 前置概念: 路由钩子分类 路由和组件的概念(方便理解钩子函数) 全局路由钩子 路由配置守卫钩子 组件内的守卫钩子 路由钩子执行顺序 eg: 从A组件跳转到B组件顺序 如果B路有更新, 每次都会执行以下三个钩子: vue3.x 对比变化图 区别补充: vue2.x 前置概念: 路由钩子分类 一共分3类, 7个钩子 路由和组件的概念(方便理解钩子函数) 路由和组件是2个概念, 可以粗犷的认为: 路由是浏览器网址 组件是显示在网页上的不同内容 全局路由钩子 router.befor

  • 批处理BAT脚本中set命令的使用详解(批处理之家Batcher)

    批处理BAT脚本中set命令的使用详解(批处理之家Batcher)

    目录 一.使用 set 命令进行赋值 1.等号两边不要有空格 2.变量值包含特殊字符需用双引号 3.避免使用系统环境变量同名的自定义变量 4.语法可行但不推荐使用 二.使用 set /p 命令读取输入 三.使用 set /a 命令进行数学运算(1) 四.使用 set /a 命令进行数学运算(2) 五.使用 set 命令进行字符串截取 六.使用 set 命令进行字符串替换 七.set命令知识点(1)把命令结果赋值给变量 八.set命令知识点(2)显示以某字符开头的变量 一.使用 set 命令进行赋

  • Python Flask中Cookie和Session区别详解

    目录 前言 安装 创建虚拟环境 进入虚拟环境 安装 flask Cookie的使用 Session的使用 前言 本篇文章,阐述一下Flask中Cookie和Session 为什么要说Cookie和Session呢? 答:因为http请求是无状态的,怎么理解呢?当你访问B站时,如果你没有Cookie或者Session,B站就认为你是一个没有登录的用户.如果你有Cookie或Session,那么B站就知道你登录了,并且知道你是谁.所以可以把跟你相关的资料返回 给你两者的区别: 答:Cookie是明文

  • JS查找数组中重复元素的方法详解

    JS查找数组中重复元素的方法详解

    本文实例讲述了JS查找数组中重复元素的方法.分享给大家供大家参考,具体如下: JS的数据类型有一个数组.今天我们就来谈谈对数组的一种处理.相信很多人都遇到过从数组中查找出不重复的元素,但是我遇到的却是从数组中查找出重复的元素. 从js数组中查找出不重复的元素的方法有很多,下面就给大家列举一个: <!DOCTYPE html> <html> <body> <script> Array.prototype.deleteEle=function(){ var ne

随机推荐