JavaScript动态加载JS与CSS文件优化HTTP请求

静态加载与动态加载的区别

网页在加载过程中，若采用常规的静态方式引用JS文件（即在body.onload事件之前加载），每个引用的JS文件都会向服务器发起一次HTTP请求。为了降低服务器的HTTP请求压力，建议每个页面尽量只保留一个JS文件引用。

<script language='Javascript' type='text/Javascript' src='?.js'></script>

相比之下，在body.onload事件之后加载的文件（即动态加载文件）会先检查浏览器缓存，若缓存中不存在该文件，才会向服务器发起HTTP请求。因此，提倡采用动态加载方式，而置于body.onload之前的静态加载文件应力求精简。

按需加载与编码处理

本系统程序按功能模块拆分为独立文件，并在/source/js/system.js中实现运行时的按需下载。这种方式避免了一次性下载所有脚本代码，从而有效降低了网络带宽的占用。

为确保JS代码在跨网站调用时不出现编码问题，程序中所有汉字均使用函数escape进行编码。若仅在单一网站内使用，可将编码方式改回汉字。

所有函数或类中标注为“本网站自用”的部分，可能与本网站后台自定义的数据类型相关，用户可根据需要将其删除。

动态加载JS与CSS实现代码

以下是/js/Load.js程序的代码及其注释说明：

var IsBody={};
//定义动态加载js程序文件的代码
eval("IsBody.AppendJs="+(IsBody.AppendJsCode="function(){var A=(typeof(arguments[0])=='string'?arguments:arguments[0]);for(var i=A.length-1;i>=0;i--){var J=document.createElement('script');J.language='javascript';J.type='text/Javascript';J.src=A[i];document.getElementsByTagName('head')[0].appendChild(J);}};"));
//测试document.body是否已经加载
IsBody.Try=function()
{ 
if(document.body&&((this.IsIE=(document.readyState!=null))?document.readyState.toLowerCase()=='complete':true))
{ //document.body加载后判断浏览器是IE还是FoxFire，本程序目前支持这两种浏览器
clearTimeout(this.Interval);
if(typeof(LoadCssFile)!='undefined')
{ //动态加载css文件，目的也是减少服务器的http请求（注意这里LoadCssFile是个数组）
var C=LoadCssFile,j=C.length,i=1;
while(i<j)
{ 
var J=document.createElement('link');J.rel='stylesheet';J.type='text/css';J.href=C[i++];document.getElementsByTagName('head')[0].appendChild(J);
} 
} 
//动态加载图片，目的也是减少服务器的http请求
if(typeof(LoadImage)!='undefined') this.AppendJs('/source/js/LoadImage.js');
//动态加载程序主体系统
this.AppendJs('/source/js/System.js');
} 
}; 
IsBody.Interval=setInterval('IsBody.Try();',100);