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

1、减缓代码下载时间：

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

  1. function showMeTheMoney(){
  2. if(!money){
  3. return false;
  4. }else{
  5. ...
  6. }
  7. }
  1. function showMeTheMoney(){
  2. if(!money){
  3. return false;
  4. }else{
  5. ...
  6. }
  7. }

可优化成：

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

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

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

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

替换成：

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

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

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

  1. if(myValue != undefined){
  2. //...
  3. }
  4. if(myValue !=null){
  5. //...
  6. }
  7. if(myValue != false){
  8. //...
  9. }
  1. if(myValue != undefined){
  2. //...
  3. }
  4. if(myValue !=null){
  5. //...
  6. }
  7. if(myValue != false){
  8. //...
  9. }

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

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

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

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

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

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

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

可优化成：

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

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

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

2、合理声明变量

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

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

  1. function First(){
  2. a = "" ;   //直接使用变量
  3. }
  4. function Second(){
  5. alert(a);
  6. }
  7. First();
  8. Second();
  1. function First(){
  2. a = "" ;   //直接使用变量
  3. }
  4. function Second(){
  5. alert(a);
  6. }
  7. First();
  8. Second();

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

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

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

  1. <html>
  2. <head>
  3. <base href="<%=basePath%>">
  4. <title>内置函数</title>
  5. <meta http-equiv="pragma" content="no-cache">
  6. <meta http-equiv="cache-control" content="no-cache">
  7. <meta http-equiv="expires" content="0">
  8. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  9. <meta http-equiv="description" content="This is my page">
  10. <script type="text/javascript">
  11. function myPower(iNum,n){
  12. var iResult = iNum ;
  13. for(var i=0;i<n;i++)
  14. iResult *= iNum ;
  15. return iResult;
  16. }
  17. var myDate1 = new Date();
  18. for(var i=0;i<150000;i++){
  19. myPower(7,8);  //自定义方法
  20. }
  21. var myDate2 = new Date();
  22. document.write(myDate2 - myDate1);
  23. document.write("<br/>");
  24. myDate1 = new Date();
  25. for(var i=0;i<150000;i++){
  26. Math.pow(7,8);  //采用系统内置方法
  27. }
  28. myDate2 = new Date();
  29. document.write(myDate2 - myDate1);
  30. </script>
  31. </head>
  32. <body>
  33. </body>
  34. </html>
  1. <html>
  2. <head>
  3. <base href="<%=basePath%>">
  4. <title>内置函数</title>
  5. <meta http-equiv="pragma" content="no-cache">
  6. <meta http-equiv="cache-control" content="no-cache">
  7. <meta http-equiv="expires" content="0">
  8. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  9. <meta http-equiv="description" content="This is my page">
  10. <script type="text/javascript">
  11. function myPower(iNum,n){
  12. var iResult = iNum ;
  13. for(var i=0;i<n;i++)
  14. iResult *= iNum ;
  15. return iResult;
  16. }
  17. var myDate1 = new Date();
  18. for(var i=0;i<150000;i++){
  19. myPower(7,8);  //自定义方法
  20. }
  21. var myDate2 = new Date();
  22. document.write(myDate2 - myDate1);
  23. document.write("<br/>");
  24. myDate1 = new Date();
  25. for(var i=0;i<150000;i++){
  26. Math.pow(7,8);  //采用系统内置方法
  27. }
  28. myDate2 = new Date();
  29. document.write(myDate2 - myDate1);
  30. </script>
  31. </head>
  32. <body>
  33. </body>
  34. </html>

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

4、合理书写if语句。

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

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

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

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

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

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

5、最小化语句数量

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

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

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

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

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

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

可优化成：

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

6、节约使用DOM

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

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

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

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

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

javascript优化的更多相关文章

  1. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

  2. 前端性能优化（三）——传统 JavaScript 优化的误区

    注:本文是纯技术探讨文,无图无笑点,希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了,某种程度上讲,同等水平前端的工资都要比后端高上不少,而圈内的另一项共识则是--网页是公司的脸面! 几 ...

  3. Javascript 优化

    Javascript 优化 作者:@gzdaijie本文为作者原创,转载请注明出处:http://www.cnblogs.com/gzdaijie/p/5324489.html 目录 1.全局变量污染 ...

  4. 5.JavaScript优化及导航菜单背后的秘密

    JavaScript优化及导航菜单背后的秘密 伍星 学习目标1.进一步了解前端优化 学习如何编写良好的 JavaScirpt2.通过导航的学习,了解JavaScirpt的应用 JavaScript在用 ...

  5. Javascript优化细节：短路表达式

    什么是短路表达式? 短路表达式:作为"&&"和"||"操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程 ...

  6. Javascript 优化项目代码技巧之语言基础（二）

        上一篇随笔介绍了如何正确判断对象类型.避免变量污染,特殊值(null.undefined.NaN)的使用,以及其他Javascript中常用关键字与方法的优化,这篇随笔将着重介绍Javascr ...

  7. Javascript 优化项目代码技巧之语言基础（一）

        Javascript的弱类型以及函数作用域等规则使用编写Javascript代码极为容易,但是编写可维护.高质量的代码却变得十分困难,这个系列的文章将总结在项目开发过程中,能够改善代码可读性. ...

  8. 对JavaScript优化及规范的一些感想

    变量...... 1.一个变量只存一种类型的数据,2.尽量减少对隐式转换的依赖,这样可增强程序的可读性,日后修改程序时不至于混乱,3.使用匈牙利命名法,4.使用局部变量时记得加 var 进行声明,不然 ...

  9. javascript优化--13模式1(DOM和浏览器模式)

    注意分离: 通过将CSS关闭来测试页面是否仍然可用,内容是否依然可读: 将JavaScript关闭来测试页面仍然可以执行正常功能:所有连接是否正常工作:所有的表单是否可以正常工作: 不使用内联处理器( ...

随机推荐

  1. android面试题（转）

    1. Android dvm的进程和Linux的进程, 应用程序的进程是否为同一个概念 DVM指dalivk的虚拟机.每一个Android应用程序都在它自己的进程中运行,都拥有一个独立的Dalvik虚 ...

  2. FreeMarker笔记 前言&第1章 入门

    简介 简介 FreeMarker是一款模板引擎:一种基于模板的.用来生成输出文本(任何来自于HTML格式的文本用来自动生成源代码)的通用工具.它是为Java程序员提供的一个开发包或者说是类库.它不是面 ...

  3. Linux 通过YUM安装rzsz

    yum自动安装: yum install lrzsz

  4. 让IE6IE7IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...

  5. spring开发相关网址

    jar包下载地址:http://repo.springsource.org/libs-release-local/org/springframework/spring/

  6. js document对象

    document对象可以通过多种方式获取: 最常见的一种情况是,你在文档的script脚本中直接使用document,这个document代表运行着该脚本的文档.(这个document和window. ...

  7. C语言实现strcpy

    strcpy.h: #ifndef STRCPY_H #define STRCPY_H #include <stdio.h> char *cat_strcpy(char *dst, con ...

  8. kali 更新源

    个人收集的kali 更新源: 修改更新源: vim /etc/apt/sources.list 更新源列表包: #apt-get update 更新系统软件: #apt-get upgrade #官方 ...

  9. MapReduce阅读

    1.mongodb权威指南6.4章 2.百科:http://baike.baidu.com/link?url=fl9FwgNq7gtFLwJ-GuKsJ25Uk-wnhgDjEwkKd8-5hoIkh ...

  10. Spark RDD概念学习系列之RDD的缓存（八）

      RDD的缓存 RDD的缓存和RDD的checkpoint的区别 缓存是在计算结束后,直接将计算结果通过用户定义的存储级别(存储级别定义了缓存存储的介质,现在支持内存.本地文件系统和Tachyon) ...