HTML 5 <script> async 属性简单设置代码异步执行

HTML5中 script标签支持脚本的异步执行async。
脚本将会异步运行:

<script type="text/javascript" src="demo_async.js" async="async"></script>

定义和用法

async 属性规定一旦脚本可用,则会异步执行。

注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。

注释:有多种执行外部脚本的方法:

  • 如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
  • 如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
  • 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

测试如下:

1.Demo.html

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script src='../Scripts/js1.js' async></script>
    <script>
        console.info('html文件执行');
    </script>
</body>

</html>

2.js1.js

(function(){
    console.info('js文件执行');
    alert(3);
})();

显示结果:

特别说明:

1.这种方式可以简单实现脚本的异步执行,但是不影响加载

2.这种方式,不能更好的控制在指定文件加载成功后,处理其他操作

3.如果想实现脚本等异步加载推荐使用RequireJS:RequireJS实例

更多:

HTML表单元素中disabled的元素的值不会提交到服务器

HTML5 <a>标签download 属性

HTML5 History对象,Javascript修改地址栏而不刷新页面(二)

原文地址:https://www.cnblogs.com/tianma3798/p/6425040.html