HTML - async 属性

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

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

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

语法


<script async></script>

适用于

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

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

HTML async 属性的示例

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

带有脚本标签的 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...")

检查当前脚本中是否存在异步

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


<!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>

支持的浏览器

浏览器
是否支持	Yes	10.0	3.6	Yes	Yes

本页