Script的async和defer
|
freeflydom
2024年4月26日 12:31
本文热度 634
|
介绍async 和 defer的使用
在HTML中,<script>
标签用于嵌入或引用JavaScript代码。async
和defer
都是<script>
标签的属性,用于改变脚本的加载和执行方式,以优化页面加载性能。
async属性
定义:async
属性表示异步地加载脚本。当浏览器遇到带有async
属性的<script>
标签时,它会并行下载脚本,而不阻塞HTML文档的解析。
行为:当脚本下载完成后,浏览器会暂停文档的解析,执行这个脚本,然后再继续HTML文档的解析。
使用场景:适用于那些与页面其余部分相互独立的脚本,比如广告加载和数据追踪脚本。因为async
脚本不保证按照指定的顺序执行,所以不适用于相互依赖的脚本。
defer属性
定义:defer
属性表示在文档解析和显示完成后,再延迟执行脚本。
行为:带有defer
属性的脚本将被并行下载,但不会阻断文档的解析。这些脚本直到整个页面都解析完成后,才会按照它们在文档中出现的顺序执行。
使用场景:适用于那些需要等待DOM树构建完成后才能执行的脚本,比如操作DOM的脚本。defer
脚本保证了执行顺序,适用于有依赖关系的脚本。
async与defer的区别
使用示例
<!-- 异步加载脚本,不保证执行顺序 -->
<script async src="script1.js"></script>
<script async src="script2.js"></script>
<!-- 延迟执行脚本,保证按照出现顺序执行 -->
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
在实际开发中,根据脚本的功能和依赖关系选择使用async
或defer
,可以在不阻塞页面渲染的同时,优化用户体验。
如果用JS创建的script标签,想创建一个async的script,应该怎么写呢?
在JavaScript中动态创建并插入一个具有async
属性的<script>
标签,可以按照以下步骤进行:
使用document.createElement()
方法创建一个新的<script>
元素。
设置这个新创建的<script>
元素的src
属性,指定需要加载的脚本URL。
设置async
属性为true
,使其异步加载。
将这个<script>
元素添加到文档中,通常是添加到<head>
或<body>
元素中。
以下是具体的代码示例:
// 创建一个新的script元素
var script = document.createElement('script');
// 设置script元素的src属性
script.src = 'https://example.com/some-script.js';
// 将async属性设置为true
script.async = true;
// 将script元素添加到文档的<head>部分
document.head.appendChild(script);
这段代码将创建一个新的<script>
元素,将其src
属性设置为指定的脚本URL,并通过设置async
属性为true
来实现异步加载。最后,这个<script>
元素被添加到文档的<head>
部分,从而开始异步加载并执行指定的JavaScript文件。
通过这种方式动态添加的<script>
标签,其行为与在HTML中直接使用<script async src="...">
标签相同,即不会阻塞页面的解析和渲染,提高了页面加载的性能。
作者:Struggle_zhu
链接:https://juejin.cn/post/7362080157191651354
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
该文章在 2024/4/28 10:25:37 编辑过