html5 script标签async属性用法

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

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

　　html：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>test script async</title>
 5     <script type="text/javascript" async="async" src="test.js"></script>
 6     <style type="text/css">
 7         .bg-red{background-color:red;margin:5px;width:100px;height:100px;}
 8         .bg-blue{background-color:blue;margin:5px;width:100px;height:100px;}
 9     </style>
10 </head>
11 <body>
12     <div class="bg-red"></div>
13 </body>
14 </html>

　　test.js：

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

　　效果图：

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

 

 

 

 

 

posted @ 2013-05-18 14:32  jinphen  阅读(426)  评论(0)  编辑  收藏  举报