js代码优化

1.合并js文件

        为优化性能，可以把多个js文件(css文件也可以)合并成极少数大文件。跟十个5k的js文件相比，合并成一个50k的文件更好。虽然代码总字节数没变，却避免了多个HTTP请求造成的开销。每个请求都会在客户端和服务器两边有个建立和消除的过程，导致请求和响应header带来开销，还有服务器端更多的进程和线程资源消耗（可能还有为压缩内容耗费的cpu时间）。除了HTTP请求，并发问题也很重要。默认情况下，在使用持久连接（persistent connections）时，ie和firefox在同一域名内只会同时下载两个资源。这就意味着，在我们等待下载2个js文件的同时，将无法下载图片资源。也就是说，这段时间内用户在页面上看不到图片。

（这个方法有缺点：把所有资源一起打包，将强制用户一次下载完所有资源，造成某些用户不必要的开销）

 

2、减缓代码下载时间：

        Web浏览器下载的是javaScript的源码、其中包含的长变量名、注释、空格和换行等多余字符大大减缓了代码下载的时间。这些字符对于团队编写时十分有效、但在最后工程完成上传到服务器时、应当将它们全部删除。例如：

1 2 3 4 5 6 7

function showMeTheMoney(){           if (!money){                   return false ;           } else {                   ...           }  }

Javascript代码   可优化成： 

function showMeTheMoney(){if(!money){return false;}else{...}}   
        这样、优化后就节约了25个字节、倘若是一个大的javaScript工程、将节省出非常大的空间、不但提高了用户的下载速度、也减轻了服务器的压力。相信这样的代码大家见过不少、很多优秀的js插件源码都这么干！ 

        另外、对于布尔型的值true和false、true都可以用1来代替,而false可以用0来代替。对于true节省了3个字节、而false则节省了4个字节、例如 

1 2 3 4 5

var bSearch = false ;           for ( var i=0;i<aChoices.length&&!bSearch;i++){               if (aChoices[i] == vValue)                   bSearch = true ;           }

替换成：

1 2 3 4 5

var bSearch = 0;           for ( var i=0;i<aChoices.length&&!bSearch;i++){               if (aChoices[i] == vValue)                   bSearch = 1 ;           }

        替换了布尔值之后、代码的执行效率、结果都相同、但节省了7个字节。 

        代码中常常会出现检测某个值是否为有效值的语句、而很多条件非的判断就判断某个变量是否为"undefined"、"null"、或者"false"、例如： 

1 2 3 4 5 6 7 8 9 10 11

if (myValue != undefined){               //...            }                       if (myValue != null ){               //...            }                       if (myValue != false ){               //...            }

        这些虽然都正确、但采用逻辑非操作符"!"也可以有同样的效果、代码如下： 

1 2 3

if (!myValue){                //...             }

  

        这样的替换也可以节省一部分字节、而且不太影响代码的可读性。类型的代码优化还有将数组定义时的 new Array()直接用"[]"代替、对象定义时的 new Object()用"{}"代替等、例如： 

var myArray = new Array();   
        var myArray = [];   
        var myObject = new Object();   
        var myObject = {};   
  
        显然、第二行和第四行的代码较为精简、而且也很容易理解。 

  

        另外、在编写代码时往往为了提高可读性、函数名称、变量名称使用了很长的英文单词、同时也大大增加了代码的长度、例如：

1 2 3

function AddThreeVarsTogether(firstVar,secondVar,thirdVar){               return (firstVar+secondVar+thirdVar);           }

可优化成： 

1	function A(a,b,c){ return (a+b+c);}

        注意：在进行变量名称替换时、必须十分小心、尤其不推荐使用文本编辑器的"查找"、"替换"功能、因为编辑器不能很好地区分变量名称或者其他代码。例如、希望将变量"tion"全部替换成"io"、很可能导致关键字"function"也被破坏。 

        对于上面说的这些减少代码体积的方法、有一些很实用的小工具可以自动完成类似的工作、例如ECMAScript Cruncher、JSMin、Online JavaScript Compressor等。 

  

3、合理声明变量 

        减少代码的体积仅仅只能使得用户下载的速度变快、但执行程序的速度并没有改变。要提高代码执行的效果、还得在各方面做调整。 

        在浏览器中、JavaScript默认的变量范围是window对象、也就是全局变量。全局变量只有在浏览器关闭才释放。而JavaScript也有局部变量、通常在function中执行完毕就会立即被释放。因此在函数体中要尽可能使用var关键字来声明变量： 

1 2 3 4 5 6 7 8

function First(){                a = "" ;   //直接使用变量             }            function Second(){                alert(a);            }            First();            Second();

   
        这样、变量"a"就成为了全局变量、直到页面关闭时才会被销毁、浪费了不必要的资源、如果在"a"的前面加上"var"、这样"a"就成为了当前function的局部变量。在执行完First()便立即被销毁。因此、在函数体中、如果不是特别需要的全局变量、都应当使用"var"进行声明、从而节省系统资源。 

  

4、使用内置函数缩短编译时间 

        只要可能、应当尽量使用JavaScript的内置函数。因为这些内置的属性、方法都是用类似C、C++之类的言语编译过的、运行起来比实时编译的JavaScript快很多。例如计算指数函数、可以自己编写： 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

< html >     < head >       < base href="<%=basePath%>">       < title >内置函数</ title >       < meta http-equiv = "pragma" content = "no-cache" >       < meta http-equiv = "cache-control" content = "no-cache" >       < meta http-equiv = "expires" content = "0" >           < meta http-equiv = "keywords" content = "keyword1,keyword2,keyword3" >       < meta http-equiv = "description" content = "This is my page" >       < script type = "text/javascript" >           function myPower(iNum,n){               var iResult = iNum ;               for(var i=0;i< n ;i++)                   iResult *= iNum ;               return iResult;           }           var myDate1 = new Date();           for(var i = 0 ;i<150000;i++){               myPower(7,8);  //自定义方法           }           var myDate2 = new Date();           document.write(myDate2 - myDate1);           document.write("");           myDate1 = new Date();           for(var i = 0 ;i<150000;i++){               Math.pow(7,8);  //采用系统内置方法           }           myDate2 = new Date();           document.write(myDate2 - myDate1);       </script>     </ head >     < body >     </ body >  </ html >

        运行的结果：在IE上使用定义的方法耗时2156ms，使用内置方法为750ms；  在firefox浏览器上，使用定义的方法耗时3625ms，使用内置方法为766ms； 

5、合理书写if语句 

        if语句恐怕是所有代码中使用最频繁的、然而很可惜的是它的执行效率并不是很高。在用if语句和多个else语句时、一定要把最有可能的情况放在第一个、然后是可能性第二的、依此类推。例如预计某个数值在0~100之间出现的概率最大、则可以这样安排代码： 

1 2 3 4 5 6 7 8 9

if (iNum>0&&iNum <100){                alert( "在0和100之间" );            } else if (iNum>99&&iNum<200){                alert( "在100和200之间" );            } else if (iNum>199&&iNum<300){                alert( "在200和300之间" );            } else {                alert( "小于等于0或者大于等于300" );            }

   
        总是将出现概率最多的情况放在前面、这样就减少了进行多次测试后才能遇到正确条件的情况。当然也要尽可能减少使用else if 语句、例如上面的代码还可以进一步优化成如下代码： 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

if (iNum>0){                if (iNum<100){                    alert( "在0和100之间" );                } else {                    if (iNum<200){                        alert( "在100和200之间" );                    } else {                        if (iNum<300){                            alert( "在200和300之间" );                        } else {                            alert( "大于等于300" );                        }                    }                }            } else {                alert( "小于等于0" );            }

  
        上面的代码看起来比较复杂、但因为考虑了很多代码潜在的判断问题、执行问题、因此执行速度要较前面的代码快。另外、通常当超过两种情况时、最好能够使用switch语句。经常用switch语句代替if语句、可令执行速度快甚至10倍。另外、由于case语句可以使用任何类型、也大大方便switch语句的编写。 

  

6、最小化语句数量 

        脚本找哦个的语句越少执行的时间就越短、而且代码的体积也会相应减少。例如使用var定义变量时可以一次定义多个、代码如下 

1 2 3 4

var iNum = 365;           var sColor = "yellow" ;           var aMyNum = [8,7,12,3] ;           var oMyDate = new Date();

        上面的多个定义可以用var关键字一次性定义、代码如下： 

var iNum = 365, sColor = "yellow" , aMyNum = [8,7,12,3],oMyDate = new Date() ;   
        同样在很多迭代运算的时候、也应该尽可能减少代码量、如下两行代码： 

var sCar = aCars[i];   
        i++;   
  
        可优化成： 

var sCar = aCars[i++];   
  



7、节约使用DOM 

        JavaScript对DOM的处理可能是最耗费时间的操作之一。每次JavaScript对DOM的操作都会改变页面的表现、并重新渲染整个页面、从而有明显的时间消耗。比较快捷的方法就是尽可能不在页面进行DOM操作、如下例中为ul添加了10个条目 

1 2 3 4 5 6

var oUl = document.getElementById( "ulItem" );           for ( var i=0;i<10;i++){               var oLi = document.createElement( "li" );               oUl.appendChild(oLi);               oLi.appendChild(document.createTextNode( "Item " +i));           }

         以上代码在循环中调用oUl.appendChild(oLi)、每次执行这条语句后、浏览器就会重新渲染页面、其次给列表添加文本节点oLi.appendChild(document.createTextNode("Item "+i))、这也会造成页面被重新渲染。因此每次运行都会造成两次重新渲染页面、共20次。 

        通常应当尽可能减少DOM的操作、将列表项目在添加文本节点之后在添加、并合理地使用createDocumentFragment()、代码如下： 

1 2 3 4 5 6 7 8

var oUl = document.getElementById( "ulItem" );           var oTemp = document.createDocumentFragment();           for ( var i=0;i<10;i++){               var oLi = document.createElement( "li" );               oLi.appendChild(document.createTextNode( "Item " +i));               oTemp.appendChild(oLi);           }           oUl.appendChild(oTemp);

8、JS代码压缩

网上有很多工具，包括在线压缩js代码的工具，可以将我们写好的js代码压缩，去掉空格和回车符，减少js代码的体积。当我们完成项目并通过测试后，将js代码压缩后替换进项目，然后再测试，通过则可以上线了。

1 2 3 4 5 6 7 8

var oUl = document.getElementById( "ulItem" );           var oTemp = document.createDocumentFragment();           for ( var i=0;i<10;i++){               var oLi = document.createElement( "li" );               oLi.appendChild(document.createTextNode( "Item " +i));               oTemp.appendChild(oLi);           }           oUl.appendChild(oTemp);