＜script＞标签的async和defer属性

hpz1223

已于 2023-11-02 16:04:28 修改

阅读量1.9k

点赞数 7

分类专栏： JavaSrcipt 文章标签： javascript 前端

于 2023-09-22 19:00:24 首次发布

本文链接：https://blog.csdn.net/qq_54140719/article/details/133176028

版权

JavaSrcipt 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript的async和defer属性，它们用于异步加载外部脚本，async立即开始下载但可能影响页面渲染，defer则在文档解析完成后执行且保持顺序。还讨论了DOMContentLoaded和load事件在资源加载中的作用。

摘要由CSDN通过智能技术生成

一、属性介绍：

1、async：表示应该立即开始下载脚本，但不能阻止其他的页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。

2、defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。(在IE7及更早的版本中，在行内脚本也可以指定这个属性)。

二、详细介绍：

1.async --异步执行脚本

使用async就相当于告诉浏览器立即下载脚本，此时和页面的渲染是异步的，但是当脚本加载完毕后会立即执行改脚本，如果此时HTML还未解析完成，会造成阻塞。

以下是使用 async 修饰的 <script> 标签的示例：

<!DOCTYPE html>
<html>
<head>
    <title>使用 async 修饰的 script 标签</title>
    <script async src="script1.js"></script>
    <script async src="script2.js"></script>
</head>

<body>
    <h1>使用 async 修饰的 script 标签</h1>
</body>

</html>

在上面的示例中，我们在 <script> 标签中添加了 async 属性，并指定了脚本文件的路径 "script.js"。这样浏览器会异步加载该脚本，而不会阻塞页面的渲染。(注意这里是加载不是执行)

**请注意，由于脚本是异步加载的，它将在加载完成后立即执行，而不会按照它们在文档中的顺序执行。这意味着 script2.js 脚本可能先于 script1.js 脚本执行。因此，如果脚本之间有依赖关系，需要谨慎管理加载顺序。

此外，使用 async 修饰的脚本会在它们被加载时立即执行，而不需要等待整个文档解析完成。这可能会导致一些问题，例如脚本可能无法访问尚未解析的 DOM 元素。为了避免这些问题，通常建议将脚本放置在 <body> 元素的结尾，以确保在脚本执行时 DOM 已经完全解析。

2.`defer` --推迟执行脚本

defer 属性也用于异步加载脚本，但与 async 不同的是，defer加载完后不会立即执行, 会延迟到整个页面解析完成在执行， defer 会保持脚本的执行顺序与其在文档中的顺序一致。

<!DOCTYPE html>
<html>
<head>
  <title>使用 defer 修饰的 script 标签</title>
  <script defer src="script1.js"></script>
  <script defer src="script2.js"></script>
  <script defer src="script3.js"></script>
</head>
<body>
  <h1>使用 defer 修饰的 script 标签</h1>
</body>
</html>

在上面的示例中，我们在三个 <script> 标签中添加了 defer 属性，并指定了每个脚本文件的路径。这样浏览器会异步加载这些脚本，并按照它们在文档中的顺序依次执行。

与 async 不同，使用 defer 修饰的脚本会在整个文档解析完成后执行，但在 DOMContentLoaded 事件之前执行。这意味着脚本可以访问完整的 DOM 结构，而不必等待整个文档加载完成。

注意：defer 和 async 属性不能同时在一个标签中使用，因为它们具有相互排斥的效果。

使用 async 和 defer 修饰的 <script> 标签可以帮助提高页面加载性能和渲染速度，但在使用时需要根据实际需求进行选择。

三、总结

1.相同点

1.表示async和defer都只能用于外部脚本文件。

2.都是异步加载脚本文件

2.不同点

1.defer在HtML解析完成后执行，async加载完立即执行，可能阻塞HTML的解析(是执行导致的，不是加载)。

2.defer延迟执行，执行的顺序不会改变；async的执行顺序与其加载速度有关，先加载完先执行。

四、知识点补充

1.`DOMContentLoaded事件`

在 HTML 文档解析过程中，当浏览器完成构建 DOM 树，所有的初始 HTML 已经完全加载和解析，但外部资源（如图片、样式表和嵌入的框架）可能还没有完全下载时触发。也就是说，DOMContentLoaded 事件标志着页面的基本结构已经准备就绪，可以进行操作和修改 DOM 元素。

2.load事件

load 事件是在整个 HTML 文档以及所有的外部资源（如图片、样式表、嵌入的框架等）都已经完全加载和解析完成后触发的事件。

使用 load 事件可以确保页面的所有资源都已经被下载并解析完成，可以进行一些比较耗时或需要等待资源加载的操作。不过需要注意的是，load 事件的触发时间比 DOMContentLoaded 事件要晚，所以在处理一些与页面元素相关的操作时，需要选择合适的事件来监听。

hpz1223

关注

7
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
＜script＞标签的async和defer属性

1、async：表示应该立即开始下载脚本，但不能阻止其他的页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。 2、defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。(在IE7及更早的版本中，在行内脚本也可以指定这个属性)。
复制链接

扫一扫