详细javaScript代码的优化

javaScript是一门解释性的语言、它不像java、C#等程序设计语言、由编译器先进行编译再运行、而是直接下载到用户的客户端进行执行。因此代码本身的优劣就直接决定了代码下载的速度以及执行的效率。

创新互联网站建设服务商，为中小企业提供网站设计、成都做网站服务，网站设计，网站托管、服务器托管等一站式综合服务型公司，专业打造企业形象网站，让您在众多竞争对手中脱颖而出创新互联。

1、减缓代码下载时间：

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

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

可优化成：

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

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

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

 
 
    
  
  
  1. var bSearch = false; 
    2. 
  
  
  2. for(var i=0;i

替换成：

 
 
    
  
  
  1. var bSearch = 0;
    2. 
  
  
  2.  for(var i=0;i

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

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

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

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

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

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

 
 
    
  
  
  1. var myArray = new Array(); var myArray = []; var myObject = new Object(); var myObject = {}; 
    2.

显然、第二行和第四行的代码较为精简、而且也很容易理解。

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

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

可优化成：

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

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

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

2、合理声明变量

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

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

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

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

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

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

 
 
    
  
  
  1.    
    2. 
  
  
  2.    
    3. 
  
  
  3. ">   
    4. 
  
  
  4. 内置函数   
    5. 
  
  
  5.    
    6. 
  
  
  6.    
    7. 
  
  
  7.    
    8. 
  
  
  8.    
    9. 
  
  
  9.    
    10. 
  
  
  10.    
    11. 
  
  
  11. function myPower(iNum,n){   
    12. 
  
  
  12. var iResult = iNum ;   
    13. 
  
  
  13. for(var i=0;i
  
  
  14. iResult *= iNum ;   
    15. 
  
  
  15. return iResult;   
    16. 
  
  
  16. }  
    17. 
  
  
  17. var myDate1 = new Date();   
    18. 
  
  
  18. for(var i=0;i<150000;i++){   
    19. 
  
  
  19. myPower(7,8); //自定义方法 }   
    20. 
  
  
  20. var myDate2 = new Date();  
    21. 
  
  
  21. document.write(myDate2 - myDate1);   
    22. 
  
  
  22. document.write("
    ");   
    23. 
  
  
  23. myDate1 = new Date();   
    24. 
  
  
  24. for(var i=0;i<150000;i++){   
    25. 
  
  
  25. Math.pow(7,8); //采用系统内置方法   
    26. 
  
  
  26. }   
    27. 
  
  
  27. myDate2 = new Date();   
    28. 
  
  
  28. document.write(myDate2 - myDate1);   
    29. 
  
  
  29.    
    30. 
  
  
  30.    
    31. 
  
  
  31.    
    32. 
  
  
  32.    
    33. 
  
  
  33.   
    34.

我运行的结果是、自定义方法用了15、内置方法用了1(不同的计算机运行速度会有差别)、这样就能看出、系统内置的方法要快很多。

4、合理书写if语句。

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

 
 
    
  
  
  1. if(iNum>0&&iNum <100){   
    2. 
  
  
  2. alert("在0和100之间");   
    3. 
  
  
  3. }  
    4. 
  
  
  4. else if(iNum>99&&iNum<200)  
    5. 
  
  
  5. {   
    6. 
  
  
  6. alert("在100和200之间");   
    7. 
  
  
  7. }  
    8. 
  
  
  8. else if(iNum>199&&iNum<300){   
    9. 
  
  
  9. alert("在200和300之间");   
    10. 
  
  
  10. }else 
    11. 
  
  
  11. {   
    12. 
  
  
  12. alert("小于等于0或者大于等于300");   
    13. 
  
  
  13. } 
    14.

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

 
 
    
  
  
  1. if(iNum>0){   
    2. 
  
  
  2. if(iNum<100){   
    3. 
  
  
  3. alert("在0和100之间");   
    4. 
  
  
  4. }  
    5. 
  
  
  5. else{   
    6. 
  
  
  6. if(iNum<200){  
    7. 
  
  
  7.  alert("在100和200之间");   
    8. 
  
  
  8. }  
    9. 
  
  
  9. else{ if(iNum<300){   
    10. 
  
  
  10. alert("在200和300之间");   
    11. 
  
  
  11. }else{   
    12. 
  
  
  12. alert("大于等于300");   
    13. 
  
  
  13. } } } }  
    14. 
  
  
  14. else{ alert("小于等于0");   
    15. 
  
  
  15. } 
    16.

上面的代码看起来比较复杂、但因为考虑了很多代码潜在的判断问题、执行问题、因此执行速度要较前面的代码快。

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

5、最小化语句数量

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

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

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

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

同样在很多迭代运算的时候、也应该尽可能减少代码量、如下两行代码：

 
 
    
  
  
  1. var sCar = aCars[i]; i++; 
    2.

可优化成：

 
 
    
  
  
  1. var sCar = aCars[i++]; 
    2.

6、节约使用DOM

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

 
 
    
  
  
  1. var oUl = document.getElementById("ulItem");   
    2. 
  
  
  2. for(var i=0;i<10;i++){   
    3. 
  
  
  3. var oLi = document.createElement("li");   
    4. 
  
  
  4. oUl.appendChild(oLi);   
    5. 
  
  
  5. oLi.appendChild(document.createTextNode("Item "+i));   
    6. 
  
  
  6. } 
    7.

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

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

 
 
    
  
  
  1. var oUl = document.getElementById("ulItem");   
    2. 
  
  
  2. var oTemp = document.createDocumentFragment();   
    3. 
  
  
  3. for(var i=0;i<10;i++){ var oLi = document.createElement("li");   
    4. 
  
  
  4. oLi.appendChild(document.createTextNode("Item "+i));   
    5. 
  
  
  5. oTemp.appendChild(oLi);   
    6. 
  
  
  6. }   
    7. 
  
  
  7. oUl.appendChild(oTemp);  
    8.

到这，关于JAVASCRIPT的优化就给大家介绍完了。希望对你有帮助。

分享文章：详细javaScript代码的优化
当前网址：http://www.mswzjz.cn/qtweb/news37/538287.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

标签优化知识

分类信息网站

成都多线机房　　 　正泰动物　　 　品牌网站定制　　 　成都网站改版　　 　成都网站设计公司　　 　SSL证书　　 　珉田数据中心　　 　成都服务器租用　　 　成都定制高级网站建设　　 　川西大数据中心　　 　成都移动服务器托管　　 　响应式网站设计　　 　响应式网站　　 　研学实践　　 　雅安主机托管　　 　主动防护网　　 　精灵网　　 　成都LED亮化工程　　 　成都网站设计公司　　 　一带一路