HTML - async 属性

HTML 的 **async** 属性是一个布尔属性，用于指定脚本在加载后立即执行。

它类似于 HTML 中的 defer 属性。众所周知，async 属性是一个布尔属性，如果存在于 <script> 元素中，则使用 JavaScript 返回 true，否则返回 false。

async 和 defer 之间的区别在于，async 属性允许脚本在加载后立即运行，而不会阻塞网页上的其他元素。另一方面，defer 属性允许脚本仅在页面加载完成后执行。

语法

<script async></script>

应用于

以下列出的元素允许使用 HTML async 属性。

元素	描述
<script>	HTML <script> 标签用于向 HTML 文档添加 JavaScript 代码。

HTML async 属性示例

以下代码演示了 async 属性的用法。

带有 script 标签的 Async 属性

当我们执行以下脚本时，它将在页面加载后立即生成一个显示警报的输出。当用户点击确定时，它将显示一段文本。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'async' attribute</title>
</head>

<body>
   <!--HTML 'async' attribute-->
   <h3>Example of the HTML 'async' attribute</h3>
   <p>This is demo of the HTML 'async' attribute.</p>
   <!--use within the 'script' element-->
   <script src="index.js" async></script>
</body>

</html>

index.js

alert("Alert message...")

检查当前脚本中是否存在 async

考虑另一种情况，我们将运行脚本以检查属性是否存在于 script 标签中。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'async' attribute</title>
   <style>
      button {
         padding: 10px;
         width: 100px;
         cursor: pointer;
         background-color: blueviolet;
         color: white;
      }
   </style>
</head>

<body>
   <!--HTML 'async' attribute-->
   <h3>Example of the HTML 'async' attribute</h3>
   <p>This is demo of the HTML 'async' attribute.</p>
   <p>
      Click on the below button to check the 'async' 
      attribute is present within the 'script' element or not.
   </p>
   <button onclick="func()">Check</button>
   <!--use within the 'script' element-->
   <script src="index.js" id="demo" async></script>
   <script>
      function func() {
         let value = document.querySelector("#demo").async;
         alert("Is 'async' is present or not? " + value);
      }
   </script>
</body>

</html>

支持的浏览器

属性
async	是	是 10.0	是 3.6	是	是

html_attributes_reference.htm

打印页面