Script的async和defer

Struggle_zhu
419 阅读3分钟

介绍async 和 defer的使用

在HTML中，<script>标签用于嵌入或引用JavaScript代码。async和defer都是<script>标签的属性，用于改变脚本的加载和执行方式，以优化页面加载性能。

async属性

  • 定义：async属性表示异步地加载脚本。当浏览器遇到带有async属性的<script>标签时，它会并行下载脚本，而不阻塞HTML文档的解析。
  • 行为：当脚本下载完成后，浏览器会暂停文档的解析，执行这个脚本，然后再继续HTML文档的解析。
  • 使用场景：适用于那些与页面其余部分相互独立的脚本，比如广告加载和数据追踪脚本。因为async脚本不保证按照指定的顺序执行，所以不适用于相互依赖的脚本。

defer属性

  • 定义：defer属性表示在文档解析和显示完成后，再延迟执行脚本。
  • 行为：带有defer属性的脚本将被并行下载，但不会阻断文档的解析。这些脚本直到整个页面都解析完成后，才会按照它们在文档中出现的顺序执行。
  • 使用场景：适用于那些需要等待DOM树构建完成后才能执行的脚本，比如操作DOM的脚本。defer脚本保证了执行顺序，适用于有依赖关系的脚本。

async与defer的区别

  • 执行时间：async脚本在下载完成后立即执行，这可能会在文档解析过程中发生；而defer脚本则要等到文档解析完成后，才会按顺序执行。
  • 执行顺序：多个async脚本不能保证按照它们在HTML文档中的顺序执行，而多个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>标签，可以按照以下步骤进行：

  1. 使用document.createElement()方法创建一个新的<script>元素。
  2. 设置这个新创建的<script>元素的src属性，指定需要加载的脚本URL。
  3. 设置async属性为true，使其异步加载。
  4. 将这个<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="...">标签相同，即不会阻塞页面的解析和渲染，提高了页面加载的性能。

avatar
文章
阅读
粉丝