本文深入探讨了HTML5中的async属性在js加载与执行过程中的作用，展示了其如何实现异步加载，并在不影响DOM渲染的前提下优化页面性能。通过实际代码示例，演示了将基础js放入<head>部分的可行性。
在研究一些网站加载时发现很多网站的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>里了。
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
扫一扫
1134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
