您的位置：首页 > Web前端 > HTML5

html5 script标签async属性用法

2013-05-18 14:32 537 查看

　　在研究一些网站加载时发现很多网站的js加载用到了async属性，于是google了一下它的用法。async是html5新加的一个属性，点这里可查看它的标准定义。它的作用就是异步加载js并执行，它和dom的渲染是异步。(IE9貌似不支持这个属性)

　　如下代码，可看到在js还没有加载完，html内部的dom已经生成了。红色为html内部了，蓝色为test.js生成的。

　　html：

<!DOCTYPE html>
<html>
<head>
<title>test script async</title>
<script type="text/javascript" async="async" src="test.js"></script>
<style type="text/css">
.bg-red{background-color:red;margin:5px;width:100px;height:100px;}
.bg-blue{background-color:blue;margin:5px;width:100px;height:100px;}
</style>
</head>
<body>
<div class="bg-red"></div>
</body>
</html>

　　test.js：

var doc = document, div = doc.createElement('div');
div.className = 'bg-blue';
doc.getElementsByTagName('body')[0].appendChild(div);

　　效果图：

　　在还没有这个属性时，一般的js都是放在网页底部，现在有了这个属性，就可以把一些基础js放到<head>里了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航