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

外部JS的阻塞下载

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

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

异步加载的思路很简单：

1. 创建一个script的DOM节点；
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();

02	MiniSite.Browser={

03	ie:/msie/.test(window.navigator.userAgent.toLowerCase()),

04	moz:/gecko/.test(window.navigator.userAgent.toLowerCase()),

05	opera:/opera/.test(window.navigator.userAgent.toLowerCase()),

06	safari:/safari/.test(window.navigator.userAgent.toLowerCase())

07

};

08	MiniSite.JsLoader={

09	load:function(sUrl,fCallback){

10	var _script=document.createElement('script');

11	_script.setAttribute('charset','gb2312');

12	_script.setAttribute('type','text/javascript');

13	_script.setAttribute('src',sUrl);

14	document.getElementsByTagName('head')[0].appendChild(_script);

15	if(MiniSite.Browser.ie){

16	_script.onreadystatechange=function(){

17	if(this.readyState=='loaded'||this.readyState=='complete'){

18	fCallback();

19

}

20

};

21	}else if(MiniSite.Browser.moz){

22	_script.onload=function(){

23	fCallback();

24

};

25

}else{

26	fCallback();

27

}

28

}

29

};

使用方法：

1

//使用方法

2	function showaddr()

3

{

4	alert(IPData);

5

}

6	MiniSite.JsLoader.load("http://fw.qq.com/ipaddress",function(){showaddr();});

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

参考文章：

Script 元素的异步加载属性

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