JavaScript 使用 async 异步执行脚本

在Web开发中，我们经常需要在页面中引入多个JavaScript脚本文件。这些脚本可能来自不同的服务器或具有不同的加载时间。如果脚本之间没有依赖关系，我们可以使用HTML5的async属性来异步加载它们。

这样做的好处是，浏览器可以在继续解析HTML文档的同时下载脚本，从而加快页面的加载速度。async属性特别适用于那些不依赖于页面其他脚本的独立功能脚本。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>Async Script Example</title>
    <!-- 异步加载第一个脚本 -->
    <script async src="https://example.com/script1.js"></script>
    <!-- 异步加载第二个脚本 -->
    <script async src="https://example.com/script2.js"></script>
</head>
<body>
    <!-- 页面内容 -->
    <h1>Welcome to My Web Page</h1>
    <p>This is an example of using async scripts.</p>
</body>
</html>

在这个示例中，script1.js和script2.js是两个独立的脚本，它们被标记为async，这意味着浏览器会立即开始下载它们，但不会阻塞页面的其他部分加载。这两个脚本的执行顺序是不确定的，但它们都会在页面的load事件之前执行。

注意事项

确保异步脚本不依赖于DOM的完整加载。如果脚本需要操作DOM，可以考虑使用DOMContentLoaded事件来确保DOM完全加载后再执行。
对于XHTML文档，async属性需要明确指定为async="async"。
浏览器支持：大多数现代浏览器（如Firefox 3.6+、Safari 5+和Chrome 7+）都支持这一特性。

相关文章：

本文标签: