Script的async和defer
|
freeflydom
2024年4月26日 12:31
本文热度 495
|
介绍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 编辑过
400 186 1886
