合并外部JavaScript 与判断页面的加载
合并JavaScript是通过把多个不同的JavaScript文件用一个来代替，从而减少HTTP请求数，以及减少下载其他资源的延迟时间。
JS的合并
以本网站为例，首页有三段js调用，分别是jquery.js、lazyload.js和两段直接摆出来的js代码(调用图片延迟加载的)：
$(function() { $(".entry img").lazyload({ placeholder:"http://img.wugongqi.cn/ailvruan/world/images/image-loading.gif", effect:"fadeIn" }); }) ;
由于这样摆着非常累赘，所以我把把上面的js代码和lazyoad.js合并一起，方法即是复制上面的js代码到lazyload.js 文件最后，结尾分号前加“(jQuery)”修改后如下：
$(function() { $(".entry img").lazyload({ placeholder:"http://img.wugongqi.cn/ailvruan/world/images/image-loading.gif", effect:"fadeIn" }); })
(jQuery) ;
这样就可以了。防止一些出错的话，可以使用批处理进行合并，完全方便又放心……
把 lazyload.js 改名为 G.js，上面一段 js 新建一个名为 T.js，然后创建一个批处理文件，如下：
copy G.js+T.js GT_bin.js /b
执行后生成 GT_bin.js 文件即所得合并 js.
把所有的js文件合并为一个js文件，然后在页面内调用函数：
方法一：
原始html代码如下：
<html>
<head>
<title>奇芳阁 — 分享最实用的绿色便携软件和互联网的精彩</title>
<script src="js1.js"></script> <script src="js2.js"></script>
</head>
<body> 奇芳阁：值得收藏的博客
</body> </html>
js1.js代码为：
function logText(message) { document.body.appendChild(document.createTextNode(message)); document.body.appendChild(document.createElement("br")); }
js2.js代码为：
window.onload = function() { logText("Application started."); logText("Library operation confirmed."); }
合并后
<html>
<head>
<title>奇芳阁 — 分享最实用的绿色便携软件和互联网的精彩</title>
<script src="js1-js2.js"></script> <script>eval(mod1);</script> <!-- 这里使用了eval()函数 //-->
<script>eval(mod2);</script> <!-- 这里使用了eval()函数 //-->
</head>
<body> 奇芳阁：值得收藏的博客
</body> </html>
合并文件js1-js2.js的代码为：
var mod1 = "function logText(message){document.body.appendChild(document.createTextNode(message));
document.body.appendChild(document.createElement(/"br/"));}";
var mod2 = "window.onload=function(){logText(/"Application started./");logText(/"Library operation confirmed./");}";
合并原理很简单，就是把前面几个js的代码分别赋给一个变量，然后在网页里用eval()这个函数执行。
重要：合并后js文件不宜太大，一般来说，合并后的js文件不要大于92160(90KB)。
方法二：
原始html代码如下：
<DIV class="leftad_1">
<SCRIPT type=text/javascript src="/ad/leftad_1.js"></SCRIPT> ---位置1
</DIV>
<P> <!-- 内容 --> <br /> 奇芳阁 — 分享实用绿色便携软件以及互联网的精彩内容<br /> <br />
<div class="leftad_2"> <SCRIPT type=text/javascript src="/ad/leftad_2.js"></SCRIPT>
</div> ---位置2
上面是两个不同的JS件
这样的话 如把这两个JS 合成一个JS
合成后又如何在不同地方(位置1位置2)显示这两个JS呢?
方法是把这2个js文件中代码放在一个js文件中，然后在页面引用js相应的地方调用相应的方法!
<DIV class="leftad_1">
<SCRIPT type=text/javascript>functionName1();</SCRIPT> ---位置1 </DIV>
<P> <!-- 内容 --> <br />
奇芳阁 — 分享实用绿色便携软件以及互联网的精彩内容<br /> <br />
<div class="leftad_2">
<SCRIPT type=text/javascript>functionName2();</SCRIPT> </div> ---位置2
js中文件代码：
function functionName1(){
//这里面放leftad_1.js的代码
}
function functionName2(){
//这里面放leftad_2.js的代码
}
方法3：
上面的js合并方法手动比较繁琐，也可以使用在线工具进行js文件的合并，本人一直使用的是开源中国的在线工具：http://tool.oschina.net/jscompress?type=3
