html5 script标签async属性用法
2013-05-27 19:54
309 查看
在研究一些网站加载时发现很多网站的js加载用到了async属性,于是google了一下它的用法。async是html5新加的一个属性,点这里可查看它的标准定义。它的作用就是异步加载js并执行,它和dom的渲染是异步。(IE9貌似不支持这个属性)
如下代码,可看到在js还没有加载完,html内部的dom已经生成了。红色为html内部了,蓝色为test.js生成的。
html:
在还没有这个属性时,一般的js都是放在网页底部,现在有了这个属性,就可以把一些基础js放到<head>里了。
如下代码,可看到在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>里了。
相关文章推荐
- html5 script标签async属性用法
- 浅析script标签中的defer与async属性
- script标签不带属性与带async、defer的区别
- JS中script标签defer和async属性的区别详解
- html5中script的async属性
- html5中script的async属性
- HTML5标签属性及用法(二)
- [Javascript]HTML5中script的async属性异步加载JS
- script标签中defer和async属性的使用
- 总结前端开发模式和规范 2、HTML5中script的async属性异步加载JS
- JS中script标签defer和async属性
- HTML5标签属性及用法(一)
- HTML5 <meta> 标签属性,所有meta用法都在这里了
- script标签的属性 async 和 defer 的区别
- script标签中defer和async属性的区别
- script标签中defer和async属性的区别
- HTML5中<script>标签中的defer与async属性详解
- script标签的async属性是用来异步加载
- script标签的async属性是用来异步加载
- script标签中defer和async属性的区别