你的位置: 奇芳阁 SEO优化 阅读文章     

合并外部JavaScript 与判断页面的加载

[ SEO优化 // 2014-09-01 ]

js合并

合并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

打赏

取消

请考虑对本站进行小额捐赠打赏:!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

各位请注意,目前发现 0 位寻荒者 在附近海域漂移!

报歉!评论已关闭.