在前端开发中,我们经常会使用 <script>
标签来加载 JavaScript 文件。如果你想让页面更快地加载并且不影响页面其他元素的渲染,你可以使用 async
属性来异步加载脚本。
async
属性简介
使用 async
属性可以将脚本标记为异步,这意味着脚本将在加载完成后立即执行,并且不会阻止页面其他元素的渲染。这一点与默认情况下(即没有 async
或 defer
属性)加载的脚本不同,后者会在加载时阻塞文档的解析和渲染。
当一个脚本有 async
属性时,它的执行顺序不能保证。因此,如果你有多个 <script async>
脚本,它们可能以任意顺序执行。
支持 async
属性的浏览器
根据 Can I Use 的数据,目前几乎所有现代浏览器都支持 async
属性。其中包括:
- Chrome 8+
- Firefox 3.6+
- Safari 5.1+
- Opera 10.6+
- Edge 12+
需要注意的是,Internet Explorer 11 及更早版本不支持 async
属性。如果你需要在这些浏览器中使用异步脚本加载,请考虑使用其他方案,如动态创建 <script>
标签并手动添加到文档中。
示例代码
下面是一个示例,它演示了如何使用 <script async>
标记来加载一个 JavaScript 文件:
--------- ----- ------ ------ ------------ ------ ------------ ------- ------ --------- ------ --------- ------- -- ---- ------------ ------- ----- ----------------------------------- ------- -------
在这个例子中,myScript.js
文件将被异步加载,并且页面其他元素的渲染不会被阻塞。当文件加载完成后,脚本将立即执行。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/9194