异步加载广告,统计JS代码,回提高网站性能

异步加载广告,统计JS代码,来提高网站性能外部JS的阻塞下载通常javaScript文件的加载会占用网页中其他元素

异步加载广告,统计JS代码,来提高网站性能
外部JS的阻塞下载

通常javaScript文件的加载会占用网页中其他元素的下载资源,在一些特别追求Web应用响应速度而且JavaScript文件并不那么小的时候,可以考虑使用异步加载JavaScript的方法来避免影响正常内容的加载进程

??? 有人会问:为什么JS不能像css、image一样并行下载了?这里就不介绍了,有兴趣的同学可以去查看下这篇文章高性能web开发 - 如何加载JS,JS应该放在什么位置?

异步加载的思路很简单:

    创建一个script的DOM节点; 对其的type属性赋值为text/function include_js(path,reload) { var scripts = document.getElementsByTagName("script"); if (!reload) for (var i=0;i<scripts.length;i++) if (scripts[i].src && scripts[i].src.toLowerCase() == path.toLowerCase() ) return; var sobj = document.createElement('script'); sobj.type = "text/javascript"; sobj.src = path; var headobj = document.getElementsByTagName('head')[0]; headobj.appendChild(sobj); }

    ?

    document.write = function (s) { document.getElementById('jsdiv').innerHTML+=s; return false; } ?function loadScript(url, callback){ var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others: Firefox, Safari, Chrome, and Opera script.onload = function(){ callback(); }; } script.src = url; document.body.appendChild(script); } ?
    使用时,只要简单地传递JavaScript文件的URL和回调函数即可:
    ?方法三可以跨域加载JS文件:

    ?01var MiniSite=new Object(); 02MiniSite.Browser={ 03ie:/msie/.test(window.navigator.userAgent.toLowerCase()), 04moz:/gecko/.test(window.navigator.userAgent.toLowerCase()), 05opera:/opera/.test(window.navigator.userAgent.toLowerCase()), 06safari:/safari/.test(window.navigator.userAgent.toLowerCase()) 07}; 08MiniSite.JsLoader={ 09load:function(sUrl,fCallback){ 10var _script=document.createElement('script'); 11_script.setAttribute('charset','gb2312'); 12_script.setAttribute('type','text/javascript'); 13_script.setAttribute('src',sUrl); 14document.getElementsByTagName('head')[0].appendChild(_script); 15if(MiniSite.Browser.ie){ 16_script.onreadystatechange=function(){ 17if(this.readyState=='loaded'||this.readyState=='complete'){ 18fCallback(); 19} 20}; 21}else if(MiniSite.Browser.moz){ 22_script.onload=function(){ 23fCallback(); 24}; 25}else{ 26fCallback(); 27} 28} 29};

    使用方法:

    1//使用方法 2function showaddr() 3{ 4alert(IPData); 5} 6MiniSite.JsLoader.load("http://fw.qq.com/ipaddress",function(){showaddr();});

    会jQuery 的同学可以直接使用jq的$.getscript()方法来使用异步加载

    参考文章:

    Script 元素的异步加载属性

    JS版include函数 实现异步加载Google广告