公司系统上海一客户的系统调优（三）-- 问题解决之二

 公司系统上海一客户的系统调优（三）-- 问题解决之二

针对js的优化。 以前只是采用了tomcat的压缩， 但是压缩的效果很明显， 但是目标不够。 所以要继续给js瘦身。

于是想到了js的压缩。 于是看了yui的压缩， 和谷歌的js 压缩。

对比一下：

yui功能相对简单， 代码也相对简单

谷歌压缩，不仅仅可以压缩， 他提供了更强大的优化功能。

针对公司的系统的特点。 觉的yui的压缩更合适。 因为现在主要是针对js的压缩， 不是优化。

特别是公司系统的js脚本写的十分分散。 往往是以函数级别的。 但是有时候很多个函数写在

同一个文件里面。 但是实际使用的时候， 这些函数不是都能使用的。 但是因为都包含在同一

个文件内部， 所以造成了js的体积不必要的增大，浪费不少资源。

所以初步设想是：

1、 程序自动合并js， 

       首先把多个js文件合并成一个js， 这样可以下载js时候不必要的的http连接。

2、 程序自动处理合并js里面的函数

       去掉js页面里面不必要的js的函数， 这样可以缩减不必要的js代码（其实这个地方应该是写程序的时候处理好的， 

      但是现在已经没有办法， 代码太多， 手工修改的人力物力没有这么多）

3、最终目标是争取每个业务功能打开的时候， 访问业务页面的时候， http的连接次数保持在6次以内。

所以基于以上几点， js函数的压缩采用yahoo的， 因为如果采用了， 主要是代码比较容易修改， 修改代码如下。

case Token.RC:
                    result.append('}');
                    braceNesting--;
                    assert braceNesting >= currentScope.getBraceNesting();
                    if (braceNesting == currentScope.getBraceNesting()) {
                    	//add by wjg
                    	//System.out.println(getToken(0).getType());
                    	if (offset < length && getToken(0).getType() != Token.SEMI)
                    	   result.append("\r\n");
                    	//end add
                        leaveCurrentScope();
                    }
                    break;

                case Token.SEMI:
                    // No need to output a semi-colon if the next character is a right-curly...
                    if (preserveAllSemiColons || offset < length && getToken(0).getType() != Token.RC) {
                    	//add by wjg
                    	System.out.println(braceNesting + " " + currentScope.getBraceNesting());
                    	if (-1 == currentScope.getBraceNesting()) {
                    		result.append(";\r\n");
                    	} else
                    	//end add
                           result.append(';');
                    }

做了如下修改， js压缩的时候产生的效果如下：

（原始文件）

var mytestvar = null;
var mytestvar1 = null;

/*
*tetstatat
*/
function testfuncone(testa, testb, testc) {
   
   testfunctwo(testa, testb);//teatabc ok hello world
}

/*
*tetstatat
*/
function testfunctwo(testd, testf) {
  
   testfuncthree(testd, testf);
}

/*
*tetstatat
*/
function testfuncthree(testg, testh) {
    
}

经过修改过以后的yui压缩如下：

var mytestvar=null;
var mytestvar1=null;
function testfuncone(b,a,c){testfunctwo(b,a)}
function testfunctwo(b,a){testfuncthree(b,a)}
function testfuncthree(b,a){};

这样代码比较容易进行下一步的处理。如果页面里面只是引用了

testfuncthree

那么看起来生成的文件就应该是：

var mytestvar=null;
var mytestvar1=null;
function testfuncthree(b,a){};