谈谈script标签中的async和defer

最新推荐文章于 2023-09-22 19:00:24 发布

Floatwor青舟

最新推荐文章于 2023-09-22 19:00:24 发布

阅读量384

点赞数 1

分类专栏：前端查漏补缺文章标签： javascript

本文链接：https://blog.csdn.net/f944913628/article/details/115833026

版权

前端查漏补缺专栏收录该内容

1 篇文章 0 订阅

订阅专栏

script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。
直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。
现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。
好在script提供了两种方式来解决上述问题，async和defer，这两个属性使得script都不会阻塞DOM的渲染。
但既然会存在两个属性，那么就说明，这两个属性之间肯定是有差异的。

defer和async的的定义

defer:

这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。
HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoad时间触发前执行，因此最好只包含一个延迟脚本。

async:

这个属性与defer类似，都用于改变处理脚本的行为。同样与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照它们的先后顺序执行。
第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。

既然都提到了DOMContentLoad那就也说下：

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。
而onload要等到所有页面元素加载完成才会触发, 包括页面上的图片、视频等等。

really? demo走走就知道了

defer

我们做了一个测试页面，页面中包含了两个script标签的加载，给他们都加上defer标识。

P.S. 为了更直观，我们给script1.js添加了1s的延迟，给script2.js添加了2s的延迟。
在这里插入图片描述
下图是页面加载的过程&script脚本的输出顺序。

不难看出，虽然script1加载用时虽然比script2短，但因为defer的限制，所以Ta只能等前边的脚本执行完毕后才能执行。
在这里插入图片描述
-----------------------------------------------------------------------------------------------------

在这里插入图片描述

async

我们修改测试页面如下：
在这里插入图片描述
遂得到了如下的结果，页面加载时长上，并没有什么变化，毕竟都是异步加载的脚本。

但是我们可以看到一个小细节，DOMContentLoaded事件的触发并不受async脚本加载的影响，在脚本加载完之前，就已经触发了DOMContentLoaded。

在这里插入图片描述
-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------
在这里插入图片描述

我们接着修改测试页面。加载一个没有延迟的script脚本，使得脚本可以即时的加载完毕。

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

我们要测试一下，如果async脚本加载的足够快，是否会在DOMContentLoaded之前就执行（这个实验是基于对async的描述“在允许的情况下执行”的论证）。
同时为了保证测试的稳定性，我们在script脚本引入的后边添加了数千个空的div节点，用来延长文档的渲染时间。
在这里插入图片描述