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

最新推荐文章于 2024-07-26 11:41:15 发布

weixin_33939380

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量204

点赞数

文章标签： javascript ViewUI

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修改地址栏而不刷新页面（二）

weixin_33939380

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 5 <script> async 属性简单设置代码异步执行

HTML5中 script标签支持脚本的异步执行async。脚本将会异步运行：&lt;script type="text/javascript" src="demo_async.js" async="async"&gt;&lt;/script&gt;定义和用法async 属性规定一旦脚本可用，则会异步执行。注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。注释：有...
复制链接

扫一扫