程序博客网 > 软件开发就业情况

javaScript——优化

来源：互联网 发布：软件开发就业情况 编辑：程序博客网 时间：2024/06/14 20:35
javaScript是一门解释性的语言、它不像java、C#等程序设计语言、由编译器先进行编译再运行、而是直接下载到用户的客户端进行执行。因此代码本身的优劣就直接决定了代码下载的速度以及执行的效率。 

        1、减缓代码下载时间： 

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

Java代码  收藏代码
  1. 01.function showMeTheMoney(){    
  2. 02.        if(!money){    
  3. 03.                return false;    
  4. 04.        }else{    
  5. 05.                ...    
  6. 06.        }    
  7. 07.}    

可优化成： 
Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.function showMeTheMoney(){if(!money){return false;}else{...}}   


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

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


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.var bSearch = false;    
  3. 02.        for(var i=0;i<aChoices.length&&!bSearch;i++){    
  4. 03.            if(aChoices[i] == vValue)    
  5. 04.                bSearch = true ;    
  6. 05.        }    
  7. var bSearch = false;  
  8.         for(var i=0;i<aChoices.length&&!bSearch;i++){  
  9.             if(aChoices[i] == vValue)  
  10.                 bSearch = true ;  
  11.         }  

替换成： 


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.var bSearch = 0;    
  3. 02.        for(var i=0;i<aChoices.length&&!bSearch;i++){    
  4. 03.            if(aChoices[i] == vValue)    
  5. 04.                bSearch = 1 ;    
  6. 05.        }    
  7. var bSearch = 0;  
  8.         for(var i=0;i<aChoices.length&&!bSearch;i++){  
  9.             if(aChoices[i] == vValue)  
  10.                 bSearch = 1 ;  
  11.         }  

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

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


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.if(myValue != undefined){    
  3. 02.            //...     
  4. 03.        }    
  5. 04.            
  6. 05.        if(myValue !=null){    
  7. 06.            //...     
  8. 07.        }    
  9. 08.            
  10. 09.        if(myValue != false){    
  11. 10.            //...     
  12. 11.        }    
  13. if(myValue != undefined){  
  14.             //...  
  15.         }  
  16.           
  17.         if(myValue !=null){  
  18.             //...  
  19.         }  
  20.           
  21.         if(myValue != false){  
  22.             //...  
  23.         }  
      
  这些虽然都正确、但采用逻辑非操作符"!"也可以有同样的效果、代码如下： 


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.if(!myValue){    
  3. 02.            //...     
  4. 03.        }    
  5. if(!myValue){  
  6.             //...  
  7.         }  
       
这样的替换也可以节省一部分字节、而且不太影响代码的可读性。类型的代码优化还有将数组定义时的 new Array()直接用"[]"代替、对象定义时的 new Object()用"{}"代替等、例如： 


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.var myArray = new Array();    
  3. 02.        var myArray = [];    
  4. 03.        var myObject = new Object();    
  5. 04.        var myObject = {};    
  6. var myArray = new Array();  
  7.         var myArray = [];  
  8.         var myObject = new Object();  
  9.         var myObject = {};  
     
   显然、第二行和第四行的代码较为精简、而且也很容易理解。 

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


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.function AddThreeVarsTogether(firstVar,secondVar,thirdVar){    
  3. 02.            return (firstVar+secondVar+thirdVar);    
  4. 03.        }    
  5. function AddThreeVarsTogether(firstVar,secondVar,thirdVar){  
  6.             return (firstVar+secondVar+thirdVar);  
  7.         }  

可优化成： 


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.function A(a,b,c){return (a+b+c);}    
  3. function A(a,b,c){return (a+b+c);}  

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

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

        2、合理声明变量 

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

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


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.function First(){    
  3. 02.            a = "" ;   //直接使用变量     
  4. 03.        }    
  5. 04.        function Second(){    
  6. 05.            alert(a);    
  7. 06.        }    
  8. 07.        First();    
  9. 08.        Second();    
  10. function First(){  
  11.             a = "" ;   //直接使用变量  
  12.         }  
  13.         function Second(){  
  14.             alert(a);  
  15.         }  
  16.         First();  
  17.         Second();  
   
     这样、变量"a"就成为了全局变量、直到页面关闭时才会被销毁、浪费了不必要的资源、如果在"a"的前面加上"var"、这样"a"就成为了当前function的局部变量。在执行完First()便立即被销毁。因此、在函数体中、如果不是特别需要的全局变量、都应当使用"var"进行声明、从而节省系统资源。 

        


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

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


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.<html>    
  3. 02.  <head>    
  4. 03.    <base href="<%=basePath%>">    
  5. 04.    <title>内置函数</title>    
  6. 05.    <meta http-equiv="pragma" content="no-cache">    
  7. 06.    <meta http-equiv="cache-control" content="no-cache">    
  8. 07.    <meta http-equiv="expires" content="0">        
  9. 08.    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    
  10. 09.    <meta http-equiv="description" content="This is my page">    
  11. 10.    <script type="text/javascript">    
  12. 11.        function myPower(iNum,n){    
  13. 12.            var iResult = iNum ;    
  14. 13.            for(var i=0;i<n;i++)    
  15. 14.                iResult *= iNum ;    
  16. 15.            return iResult;    
  17. 16.        }    
  18. 17.        var myDate1 = new Date();    
  19. 18.        for(var i=0;i<150000;i++){    
  20. 19.            myPower(7,8);  //自定义方法    
  21. 20.        }    
  22. 21.        var myDate2 = new Date();    
  23. 22.        document.write(myDate2 - myDate1);    
  24. 23.        document.write("<br/>");    
  25. 24.        myDate1 = new Date();    
  26. 25.        for(var i=0;i<150000;i++){    
  27. 26.            Math.pow(7,8);  //采用系统内置方法    
  28. 27.        }    
  29. 28.        myDate2 = new Date();    
  30. 29.        document.write(myDate2 - myDate1);    
  31. 30.    </script>    
  32. 31.  </head>    
  33. 32.  <body>    
  34. 33.  </body>    
  35. 34.</html>    
  36. <html>  
  37.   <head>  
  38.     <base href="<%=basePath%>">  
  39.     <title>内置函数</title>  
  40.     <meta http-equiv="pragma" content="no-cache">  
  41.     <meta http-equiv="cache-control" content="no-cache">  
  42.     <meta http-equiv="expires" content="0">      
  43.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  44.     <meta http-equiv="description" content="This is my page">  
  45.     <script type="text/javascript">  
  46.         function myPower(iNum,n){  
  47.             var iResult = iNum ;  
  48.             for(var i=0;i<n;i++)  
  49.                 iResult *= iNum ;  
  50.             return iResult;  
  51.         }  
  52.         var myDate1 = new Date();  
  53.         for(var i=0;i<150000;i++){  
  54.             myPower(7,8);  //自定义方法  
  55.         }  
  56.         var myDate2 = new Date();  
  57.         document.write(myDate2 - myDate1);  
  58.         document.write("<br/>");  
  59.         myDate1 = new Date();  
  60.         for(var i=0;i<150000;i++){  
  61.             Math.pow(7,8);  //采用系统内置方法  
  62.         }  
  63.         myDate2 = new Date();  
  64.         document.write(myDate2 - myDate1);  
  65.     </script>  
  66.   </head>  
  67.   <body>  
  68.   </body>  
  69. </html>  
     
   我运行的结果是、自定义方法用了15、内置方法用了1(不同的计算机运行速度会有差别)、这样就能看出、系统内置的方法要快很多。 

        


        4、合理书写if语句。 

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


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.if(iNum>0&&iNum <100){    
  3. 02.            alert("在0和100之间");    
  4. 03.        }else if(iNum>99&&iNum<200){    
  5. 04.            alert("在100和200之间");    
  6. 05.        }else if(iNum>199&&iNum<300){    
  7. 06.            alert("在200和300之间");    
  8. 07.        }else{    
  9. 08.            alert("小于等于0或者大于等于300");    
  10. 09.        }    
  11. if(iNum>0&&iNum <100){  
  12.             alert("在0和100之间");  
  13.         }else if(iNum>99&&iNum<200){  
  14.             alert("在100和200之间");  
  15.         }else if(iNum>199&&iNum<300){  
  16.             alert("在200和300之间");  
  17.         }else{  
  18.             alert("小于等于0或者大于等于300");  
  19.         }  
  
      总是将出现概率最多的情况放在前面、这样就减少了进行多次测试后才能遇到正确条件的情况。当然也要尽可能减少使用else if 语句、例如上面的代码还可以进一步优化成如下代码： 


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.if(iNum>0){    
  3. 02.            if(iNum<100){    
  4. 03.                alert("在0和100之间");    
  5. 04.            }else{    
  6. 05.                if(iNum<200){    
  7. 06.                    alert("在100和200之间");    
  8. 07.                }else{    
  9. 08.                    if(iNum<300){    
  10. 09.                        alert("在200和300之间");    
  11. 10.                    }else{    
  12. 11.                        alert("大于等于300");    
  13. 12.                    }    
  14. 13.                }    
  15. 14.            }    
  16. 15.        }else{    
  17. 16.            alert("小于等于0");    
  18. 17.        }    
  19. if(iNum>0){  
  20.             if(iNum<100){  
  21.                 alert("在0和100之间");  
  22.             }else{  
  23.                 if(iNum<200){  
  24.                     alert("在100和200之间");  
  25.                 }else{  
  26.                     if(iNum<300){  
  27.                         alert("在200和300之间");  
  28.                     }else{  
  29.                         alert("大于等于300");  
  30.                     }  
  31.                 }  
  32.             }  
  33.         }else{  
  34.             alert("小于等于0");  
  35.         }  
     
   上面的代码看起来比较复杂、但因为考虑了很多代码潜在的判断问题、执行问题、因此执行速度要较前面的代码快。 

        另外、通常当超过两种情况时、最好能够使用switch语句。经常用switch语句代替if语句、可令执行速度快甚至10倍。另外、由于case语句可以使用任何类型、也大大方便switch语句的编写。 




        5、最小化语句数量 

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


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.var iNum = 365;    
  3. 02.        var sColor = "yellow";    
  4. 03.        var aMyNum = [8,7,12,3] ;    
  5. 04.        var oMyDate = new Date();    
  6. var iNum = 365;  
  7.         var sColor = "yellow";  
  8.         var aMyNum = [8,7,12,3] ;  
  9.         var oMyDate = new Date();  

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


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


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.var sCar = aCars[i];    
  3. 02.        i++;    
  4. var sCar = aCars[i];  
  5.         i++;  
      
  可优化成： 


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.var sCar = aCars[i++];    
  3. var sCar = aCars[i++];  
        


        6、节约使用DOM 

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


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.var oUl = document.getElementById("ulItem");    
  3. 02.        for(var i=0;i<10;i++){    
  4. 03.            var oLi = document.createElement("li");    
  5. 04.            oUl.appendChild(oLi);    
  6. 05.            oLi.appendChild(document.createTextNode("Item "+i));    
  7. 06.        }    
  8. var oUl = document.getElementById("ulItem");  
  9.         for(var i=0;i<10;i++){  
  10.             var oLi = document.createElement("li");  
  11.             oUl.appendChild(oLi);  
  12.             oLi.appendChild(document.createTextNode("Item "+i));  
  13.         }  
      
   以上代码在循环中调用oUl.appendChild(oLi)、每次执行这条语句后、浏览器就会重新渲染页面、其次给列表添加文本节点oLi.appendChild(document.createTextNode("Item "+i))、这也会造成页面被重新渲染。因此每次运行都会造成两次重新渲染页面、共20次。 

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


Java代码  收藏代码
  1. view plaincopy to clipboardprint?  
  2. 01.var oUl = document.getElementById("ulItem");    
  3. 02.        var oTemp = document.createDocumentFragment();    
  4. 03.        for(var i=0;i<10;i++){    
  5. 04.            var oLi = document.createElement("li");    
  6. 05.            oLi.appendChild(document.createTextNode("Item "+i));    
  7. 06.            oTemp.appendChild(oLi);    
  8. 07.        }    
  9. 08.        oUl.appendChild(oTemp);    
  10. var oUl = document.getElementById("ulItem");  
  11.         var oTemp = document.createDocumentFragment();  
  12.         for(var i=0;i<10;i++){  
  13.             var oLi = document.createElement("li");  
  14.             oLi.appendChild(document.createTextNode("Item "+i));  
  15.             oTemp.appendChild(oLi);  
  16.         }  
  17.         oUl.appendChild(oTemp);  
0 0
软件开发就业情况 软件开发就业情况
原创粉丝点击
热门IT博客
网络整合营销理论网络整合营销理论
sql2005数据库安装教程sql2005数据库安装教程
德勤gdc和德勤区别知乎
机床数据采集
weka数据预处理
浅草渔具淘宝店铺
模拟人生4 社群网络
java前台上传文件
哪些网络公选课容易过
linux 安装ssh2扩展
linux系统能玩什么游戏
北方软件学院
java就业培训学校
linux while循环 停止
怎么修改淘宝里的评价
淘宝宝贝分类图片大小
淘宝网哥弟正品女装
sql 覆盖索引
nginx redis
fifa17球员数据
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 下巴向上翘怎么办 翘下巴怎么办 眼睛经常红怎么办 狗狗拉不出来屎怎么办 屁股长疮有脓包怎么办 屁股长疮怎么办 屁股生疮怎么办 屁股生疮有脓包怎么办 腿不一样长怎么办 孩子不见长高怎么办 儿童长个慢怎么办 孩子鼻梁塌怎么办 国防生取消后怎么办 即兴舞蹈不会怎么办 体能很差怎么办 孩子体能差怎么办 身体不协调怎么办 俯卧撑酸痛怎么办 脚受凉疼痛怎么办 脚腕见风就难受怎么办 腿风湿痛怎么办 月子里脚冷怎么办 脚着凉怎么办 受凉腿疼怎么办 弹力胶鞋子好滑怎么办 斜方肌总是耸肩怎么办 战绳甩不动怎么办 肠胃吸收能力差怎么办 颈椎病头晕脑胀怎么办 空姐面试短发怎么办 孩子走路难看怎么办 单纯臀部疼怎么办 肌肉错位了怎么办 小腿肌肉萎缩怎么办 军犬后代怎么办 和尚鹦鹉怕人怎么办 鹦鹉不吃食怎么办 战地不赔偿怎么办 工作太懒散怎么办 信念动摇怎么办 机械表越走越慢怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里