HTML - async 属性_HTML 菜鸟教程

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

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

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

语法


<script async></script>

适用于

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

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

HTML async 属性的示例

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

带有脚本标签的 Async 属性

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


<!DOCTYPE html>
<html lang="zh-CN">

<head>
	 <title>HTML的“async”属性</title>
</head>

<body>
	 <!--HTML 'async' 属性-->
	 <h3>HTML“async”属性示例</h3>
	 <p>这是HTML“async”属性的演示。</p>
	 <!--在“script”元素中使用-->
	 <script src="index.js" async></script>
</body>

</html>

index.js


 alert("Alert message...")

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

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


<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
	 <!--HTML 'async' 属性-->
	 <h3>HTML“async”属性示例</h3>
	 <p>这是HTML“async”属性的演示。</p>
	 <p>
			点击下面的按钮检查 'async' 
			属性是否存在于'script'元素中。
	 </p>
	 <button onclick="func()">Check</button>
	 <!--在“script”元素中使用-->
	 <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	Yes	10.0	3.6	Yes	Yes

<< HTML - alt 属性 HTML - autofocus 属性 >>