script的async属性以非阻塞的模式加载脚本
更新时间:2013年01月15日 14:48:48 作者:
HTML5实现了script的async属性,这个新的属性可以让js在浏览器中以非阻塞的模式加载,接下来介绍如何应用此属性,感兴趣的朋友可以了解下
1.HTML5实现了script的async属性,这个新的属性可以让js在浏览器中以非阻塞的模式加载,另外script还有一个defer属性,这个属性目前所有浏览器都已实现(除了firefox和chrome的早期版本),IE这方面做得好,从一开始就支持些属性。
复制代码 代码如下:
//async
<script async src="dquery.js" async></script>
//defer
<script async src="dquery.js" defer>
</script>
2.async和defer的区别:
带有async或者defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的onload事件处理, 在script下载完成后调用,用于做一些和此script相关的初始化工作。它的不同之处在于async一旦下载完成就立即执行(在window.onload事件之前),不确保执行的顺序,而defer能确保js是在按照其在页面中的顺序执行(在DOMContentLoaded事件之前)。
3.为了解决浏览器兼容问题可以使用下面的代码进行处理
复制代码 代码如下:
function lazyload() {
var elem = document.createElement("script");
elem.type = "text/javascript";
elem.async = true;
elem.src = "js/dquery.js?v=11"; //对应的JS文件
document.body.appendChild(elem);
}
if (window.addEventListener) {
window.addEventListener("load", lazyload, false);
} else if (window.attachEvent) {
window.attachEvent("onload", lazyload);
} else {
window.onload = lazyload;}
由于是异步加载所以使用相应js内容就需要在window.onload事件中使用,直接写在页面中会报脚本错误,如:
相关文章
Web性能优化系列 10个提升JavaScript性能的技巧
Javascript 性能优化绝不是一种书面的技术,Nicholas 的技术演进列出了10条建议,帮助你写出高效的 JS 代码2016-09-09实现checkbox全选、反选、取消JavaScript小脚本异常
实现checkbox全选,反选,取消JavaScript小脚本的时出现点小异常,大家可以看看,以后就不要犯这个特别2的错误了2014-04-04
最新评论