日期:2014-05-16  浏览次数:20301 次

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

外部JS的阻塞下载

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

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

异步加载的思路很简单:

  1. 创建一个scriptDOM节点;
  2. 对其的type属性赋值为text/javascript
  3. 再指定它的src属性为要加载的js文件URL;
  4. 把这个DOM节点加入到页面中。





方法一:

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);  

} 

?

?
本函数可以用于一些广告和统计的js文件异步加载,避免了因加载js文件而造成的网页显示速度慢的问题。

但是这样当加载的js文件含有document.write语句时,在IE下没有反应,但在Mozilla Firefox 下就会让你原来的网页消失,只显示document.write出来的内容.对此问题一网友给出了一种比较好的解决办法,当然是重写document.write方法:

有一个可以让document.write信息显示出来的方法:

先在网页中需要显示write出来的内容的地方加入一个div标签:
1 <div id='jsdiv'></div>

然后在include_js之前加上这句:

 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文件:

?
01 var MiniSite=new Object();