看不起小钱就赚了大钱,同样的,看不其一字节两字节的优化,那么就谈不上什么优化了。因此,我们需要从细节做起,从优化每一字节作做起.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