浅谈script标签中的async和defer

简介: script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了。直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲染。

 

script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了。
直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲染。

现在大家习惯于在页面中引用各种的第三方脚本,如果第三方服务商出现了一些小问题,比如延迟之类的,就会使得页面白屏。
好在script提供了两种方式来解决上述问题,asyncdefer,这两个属性使得script都不会阻塞DOM的渲染。
但既然会存在两个属性,那么就说明,这两个属性之间肯定是有差异的。

defer

如果script标签设置了该属性,则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染;
如果有多个设置了deferscript标签存在,则会按照顺序执行所有的script
defer脚本会在文档渲染完毕后,DOMContentLoaded事件调用前执行。

我们做了一个测试页面,页面中包含了两个script标签的加载,给他们都加上defer标识。
P.S. 为了更直观,我们给script1.js添加了1s的延迟,给script2.js添加了2s的延迟。
image
下图是页面加载的过程&script脚本的输出顺序。
不难看出,虽然script1加载用时虽然比script2短,但因为defer的限制,所以Ta只能等前边的脚本执行完毕后才能执行。
image
image

async

async的设置,会使得script脚本异步的加载并在允许的情况下执行
async的执行,并不会按着script在页面中的顺序来执行,而是谁先加载完谁执行。

我们修改测试页面如下:
image
遂得到了如下的结果,页面加载时长上,并没有什么变化,毕竟都是异步加载的脚本。
但是我们可以看到一个小细节,DOMContentLoaded事件的触发并不受async脚本加载的影响,在脚本加载完之前,就已经触发了DOMContentLoaded
image
image
image
image

我们接着修改测试页面。加载一个没有延迟的script脚本,使得脚本可以即时的加载完毕。
我们要测试一下,如果async脚本加载的足够快,是否会在DOMContentLoaded之前就执行(这个实验是基于对async的描述“在允许的情况下执行”的论证)。
同时为了保证测试的稳定性,我们在script脚本引入的后边添加了数千个空的div节点,用来延长文档的渲染时间。
image
执行结果不出所料,如果给async一定的时间,是有可能在DOMContentLoaded事件之前就执行的。
image
P.S. 从上图中左上角的火焰图中,我们也能看到,出现了多段的蓝色(更新:晚上写的时候懵了,紫色的才是渲染,蓝色的是解析)文档渲染。以及下边Console的顺序。
说明的确,async的执行是加载完成就会去执行,而不像defer那样要等待所有的脚本加载完后按照顺序执行。

画几张图简要说明

网上有了不少这种类似的图,但是基本都是拿一个script就举例的
未免太过寒酸,so咱们来一个豪华版,来画一下多个脚本加载时的甘特图
就像近年来各大手机厂商,出新机都喜欢来一个X+X plus

拿四个不同的颜色来标明各自代表的含义
image

普通script

文档解析的过程中,如果遇到script脚本,就会停止页面的渲染进行下载(但是并不会影响后续的解析,解析和渲染是两码事儿)。
资源的下载是在解析过程中进行的,虽说script1脚本会很快的加载完毕,但是他前边的script2并没有加载&执行,所以他只能处于一个挂起的状态,等待script2执行完毕后再执行。
当这两个脚本都执行完毕后,才会继续渲染页面。
image

defer

文档解析时,遇到设置了defer的脚本,就会在后台进行下载,但是并不会阻止文档的渲染,当页面解析&渲染完毕后。
会等到所有的defer脚本加载完毕并按照顺序执行,执行完毕后会触发DOMContentLoaded事件。
image

async

async脚本会在加载完毕后执行。
async脚本的加载不计入DOMContentLoaded事件统计,也就是说下图两种情况都是有可能发生的

image
image

推荐的应用场景

defer

如果你的脚本代码依赖于页面中的DOM元素(文档是否渲染完毕),或者被其他脚本文件依赖。
例:

  1. 评论框
  2. 代码语法高亮
  3. polyfill.js

async

如果你的脚本并不关心页面中的DOM元素(文档是否渲染完毕),并且也不会产生其他脚本需要的数据。
例:

  1. 百度统计

如果不太能确定的话,用defer总是会比async稳定。。。

参考资料

  1. https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script

测试代码存放处:https://github.com/Jiasm/research-script-tag
clone后执行npm start即可运行。
调试推荐使用chrome无痕模式(这样才不会在Performance页签上看到不相关的插件数据)。

目录
相关文章
|
分布式计算 测试技术 Apache
探索Apache Hudi核心概念 (3) - Compaction
探索Apache Hudi核心概念 (3) - Compaction
292 5
|
JavaScript 索引
【vue】element ui 实现动态表单点击按钮新增行/删除行
【vue】element ui 实现动态表单点击按钮新增行/删除行
3668 0
|
程序员 API C语言
Win32 API介绍​(COORD、GetStdHandle、GetConsoleCursorInfo 、SetConsoleCursorInfo)、<locale.h>本地化、类项
Win32 API介绍​(COORD、GetStdHandle、GetConsoleCursorInfo 、SetConsoleCursorInfo)、<locale.h>本地化、类项
|
存储 SQL 运维
一步到位,服务器监控就是这么简单
对于运维的日常工作来说,服务器监控是必须且最基础的一项内容。在企业基础设施运维过程中,管理员必须能够掌握所有服务器的运行状况,以便及时发现问题,尽可能减少故障的发生。本期为大家介绍如何使用阿里云SLS来快速构建一套完整的服务器/主机基础指标实时监控方案。
5441 0
 一步到位,服务器监控就是这么简单
|
9月前
|
机器学习/深度学习 人工智能 分布式计算
【AI系统】混合并行
混合并行融合了数据并行、模型并行和流水线并行,旨在高效利用计算资源,尤其适合大规模深度学习模型训练。通过将模型和数据合理分配至多个设备,混合并行不仅提升了计算效率,还优化了内存使用,使得在有限的硬件条件下也能处理超大型模型。3D混合并行(DP+PP+TP)是最先进的形式,需至少8个GPU实现。此策略通过拓扑感知3D映射最大化计算效率,减少通信开销,是当前深度学习训练框架如Deepspeed和Colossal AI的核心技术之一。
417 15
【AI系统】混合并行
|
9月前
|
存储 人工智能 并行计算
【AI系统】算子开发编程语言 Ascend C
本文详细介绍了昇腾算子开发编程语言 Ascend C,旨在帮助开发者高效完成算子开发与模型调优。Ascend C 原生支持 C/C++标准,通过多层接口抽象、自动并行计算等技术,简化开发流程,提高开发效率。文章还探讨了并行计算的基本原理及大模型并行加速策略,结合 Ascend C 的 SPMD 编程模型和流水线编程范式,为读者提供了深入理解并行计算和 AI 开发的重要工具和方法。
335 2
|
存储 缓存 Linux
【Linux】进程概念(冯诺依曼体系结构、操作系统、进程)-- 详解
【Linux】进程概念(冯诺依曼体系结构、操作系统、进程)-- 详解
|
11月前
|
开发工具 Android开发 开发者
Android开发环境搭建
如何搭建Android开发环境,包括下载和安装Android Studio、配置SDK、创建新的Android工程项目等。
329 0
Android开发环境搭建
|
11月前
|
编译器 C语言 C++
配置C++的学习环境
【10月更文挑战第18天】如果想要学习C++语言,那就需要配置必要的环境和相关的软件,才可以帮助自己更好的掌握语法知识。 一、本地环境设置 如果您想要设置 C++ 语言环境,您需要确保电脑上有以下两款可用的软件,文本编辑器和 C++ 编译器。 二、文本编辑器 通过编辑器创建的文件通常称为源文件,源文件包含程序源代码。 C++ 程序的源文件通常使用扩展名 .cpp、.cp 或 .c。 在开始编程之前,请确保您有一个文本编辑器,且有足够的经验来编写一个计算机程序,然后把它保存在一个文件中,编译并执行它。 Visual Studio Code:虽然它是一个通用的文本编辑器,但它有很多插
356 6
|
运维 监控 Devops
研发管理之认识DevOps
DevOps是促进开发、技术运营和质量保障部门间沟通与协作的一组过程和方法,旨在通过自动化软件交付和架构变更流程,提高软件发布的速度和可靠性。起源于对传统开发模式应对快速市场变化不足的反思,DevOps强调开发和运维的紧密合作,采用自动化工具实现持续集成、持续部署,以缩短开发周期并提升产品质量。其核心目标是缩短系统开发生命周期,提供持续交付和快速反馈。DevOps通过自动化、协作和实时监控等手段,降低了运维成本,增强了安全性,提高了客户满意度和创新能力。
270 0
研发管理之认识DevOps