您现在的位置: 冰舟工作室 >> WEB开发 >> JavaScript >> 文章正文

JavaScript圣经之优化总结

作者:佚名 文章来源:不详 点击数: 更新时间:2008-4-15 16:06:41
看不起小钱就赚了大钱,同样的,看不其一字节两字节的优化,那么就谈不上什么优化了。因此,我们需要从细节做起,从优化每一字节作做起.google在这方面确实是老大,他的gmail就做得非常的好......
1、hash、数组和一般对象
    未优化代码                                  
优化后的代码:
var oarrSum = new Array();
var oarrSum = [];
var oarrSum = new Array(30);
var oarrSum = [];
var oarrSum = new Array(30, 234, 234, 43, nNum);
var oarrSum = [30, 234, 234, 43, nNum];
var oarrSum = new Array();
var oarrSum = {a:"test1", b:"test2"};
// 这样优化后有两种访问方式:
oarrSum["a"] = "test1";
oarrSum.a + oarrSum["b"];
oarrSum["b"] = "test2";
var oTmp = new Object();
var oTmp = {test:"good", test2:function (s) {
 return s.replace(/\s/gm, "");
}};
oTmp.test = "good";
oTmp.test2 = function (s) {
 return s.replace(/\s/gm, "");
};
2、日期
    未优化代码
    优化后的代码
var oDt = new Date();                           
var oDt = new Date; // 不可小看少了一对括号哦关于日期对象,如果不是要使用他的方法getTime(),那么最好定义个全局的Date对象,在各个js文件、各个需要的方法里引用他,这样避免多次创建对象而浪费性能。
3、一些全局对象的简写
建议在js开头有这样的代码var d = document, w = windiw,out = d.write,t = top;如果把var w = this;就更迷惑人了,其实全局的this就是window对象这样就可以在以后的方法里引用他们了,不过这时候要注意你取的变量名不要和他们冲突,这样做的目的是让代码更简洁,js文件体积就会更小写,当然,变量名力求简短也是必须的。
4、for循环的优化  注意:本优化方法适用于各种编程语言哦!
我们假定给id为oTable的表格的第2列求和,并写到最后一行的第2列里,如果行数在万行以上,下面的优化就看出效率了
< script >
          var n1 = 0, n2 = 0, d = document;
var out = d.write;// 未优化代码
function fnSum() {
 try {
  if (null == oTable || "object" != typeof oTable) {
   return 0;
  }
  var o = oTable.rows; // 为了让代码简洁
         // 从第二行开始,跳过标题行和末尾行   
  var nSum = 0;
  out("\u8868\u683c\u6709" + o.length + "\u884c");
  var nStart = new Date;
  for (var i = 1; i < o.length - 1; i++) {      
// 如果遇到无效的数字或空值就表示表格中有空行,
// 因此就停止循环,开发人员一定要作好兼容的处理
// 由于n的值在两个地方用到,因此就提出来      
   var n = parseFloat(o(i).cells[1].innerText);
   if (!isFinite(n)) {
    break;
   }
   nSum += n;
  }  
 // 看看用了多少豪秒   
  return n1 = (new Date - nStart), o(i).cells[1].innerText = nSum;
 }
 catch (e) {
  alert("fnSum: " + e.message);
 }
}// 优化后的代码,虽然代码量多了,但是运行效率却相当客观
// 其实,下面的代码是充分利用了CPU的新特性
function fnSum1() {
 try {
  if (null == oTable || "object" != typeof oTable) {
   return 0;
  }
  var o = oTable.rows; // 为了让代码简洁          
                           // 从第二行开始,跳过标题行和末尾行    
  var nSum = 0;
  var nStart = new Date, i = 1, R = o.length - 2, T = 8;
  var k = R % T, n = 0;
  var fnS = function (o) {
   var n = parseFloat(o.innerText);
   if (!isFinite(n)) {
    return -1;
   }
   return n;
  };
  while (k--) {
   n = fnS(o(i++).cells[1]);
   if (-1 == n) {
    break;
   }
   nSum += n;
  }
  k = parseInt(R / T);
  while (k--) {
   for (var x = 0; x < T; x++) {
    n = fnS(o(i++).cells[1]);
    if (-1 == n) {
     break;
    }
    nSum += n;
   }
  }   // 看看用了多少豪秒    
  return n2 = (new Date - nStart), o(i).cells[1].innerText = nSum;
 }
 catch (e) {
  alert("fnSum1: " + e.message);
 }
}
var s1 = fnSum(), s2 = fnSum1();
out("fnSum1\u6bd4fnSum\u5feb" + (n1 - n2) + "\u8c6a\u79d2");
out("fnSum1:" + n2 + "\u8c6a\u79d2;\u7ed3\u679c = " + s2 + "");
out("fnSum:" + n1 + "\u8c6a\u79d2;\u7ed3\u679c = " + s1 + "");
</ script >

表格有4898行fnSum1比fnSum快2735豪秒fnSum1:240豪秒;结果 = 279072fnSum:2975豪秒;结果 = 279072

5、关于","运算符号
逗号运算符能给我们带来什么?a、让我们的代码更加诡异,如果你不想别人轻易读懂你的代码b、最主要的是,他能使我们的代码少好几字节,不要小看这几字节,   如果10万人同时访问,其服务器的IO也可以少多少M?   每行代码少回车换行两字节也不错啊,还少了一对{},又是两字节。举例如下:
if ("17px" == o.height) {
 o.position = "absolute",
 o.left = t.left + n,
 o.top = t.top - 3,
 o.width = t.right - t.left - n - 1,
 o.height = 350,
 o.border = "1 solid #0099FF",
 ob.innerHTML = ob.innerHTML.replace(/\r\n/gm, "");
} else {
 o.position = "relative",
 o.left = 0,
 o.top = 0,
 o.height = 17,
 o.border = "0 solid #0099FF";
}
6、什么时候可以不要";"?
凡是"}"前都不需要分号,这样也可以介绍代码字节数哦!
7、需要维护的代码和发布代码的区别?
需要维护的代码需要保留各种注释和美观的格式,便于维护。但是发布的就不需要了,因此,自己做个脚本优化器吧a、把所有的注释和空行去掉b、把各种运算符号前后的空格去掉,别忘了逗号运算符号哦?c、如果你的代码是非常规范的,你可以把所有的Tab符号和回车、换行去掉d、把所有"}"前的";"去掉
8、判断数字的有效性,建议还是用isFinite。
为什么?因为他不光是判断NaN,还判断了是否无穷大或无穷小。如果数字有效,则他返回真
9、充分利用正则表达式的功能
a、比如:替换、查找、提取;b、如果同一个正则表达式3次以上使用,建议用compile先编译以提高速度;c、创建正则表达式对象的时候如果不是动态的拼传,直接用var r = /\d|\r/gm;的格式,   而不要用new RegExp,否则性能会有影响。
10、尽量避免脚本和HTML DOM模型发生交互,或尽量避免多次交互
a、因为和HTML DOM模型发生交互是相当耗系统性能资源的,比如通过innerHTML一万次创建一万个div对象,和通过innerHTML一次创建一万个div对象,其所花的时间是相差很大的。b、尽量避免动态绑定事件方法c、一定要用变通的方法来替代styfle="height:Expression(...)"或setExpression这样的代码
 

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=2293940


  • 上一篇文章:

  • 下一篇文章:
  • 相关内容
    · JS 控制select表单
    · 经典源码JavaScript之计数器(倒数
    · 高手教程:jsp中根据传入值,用j
    · 使用DOS和javascript在html网页中
    · javascript函数之删除空格
    · javascript巧妙实现WORD里的斜线
    · 经典收藏JavaScript中常用的107条
    · JavaScript圣经之优化篇
    · JavaScript圣经之优化总结
    · IDv+Js+css切换效果
    · 图片幻灯切换代码(纯JS代码带演
    · 常用的107条Javascript
    · JavaScript 删除空格(trim)
    · Javascript 计算闰年
    · JavaScript静态页面值传递之Cook
    · html----javascript----只打开一
    · 妙用JavaScript实现网页的任意缩
    · 通过Javascript把页面导入到Exce
    · javascript
    · 常用的JavaScript语句集(转载)
    · JavaScript语言
    · javascript 实现的锁屏、解屏功能
    · 获取web页面大小、分辨率等信息(
    · php+javascript 静态化简单实例
    · javascript事件的绑定
    · javascript 详解各控件的操作
    · 最新Javascript按比例压缩图片,
    · javascript中的indexOf(),lastin
    · javascript截取字符串方法
    · ajax学习笔记一:面向对象的javas
    · Atlas学习笔记11:扩展javascrip
    · Javascript“画图”Asp.net版
    · dojo (a open source JavaScript
    · 用Acrobat Javascript 开发。
    · JavaScript技术要点
    · 免费的javascript写的控件组件
    · document 文挡对象
    · 用javascript检查文件大小
    · 小议Javascript代码优化方法及原
    · javascript控制lotus的rtf域
    · javascript学习
    · 在线压缩javascript
    · 随心所欲的Web页面打印技术(Asp.
    · javascript 写的tab页代码
    · javascript中replace()函数用法小
    · test

    CopyRights 2007-2008 冰舟工作室 All Rights Reserved
    www.bz918.com