JavaScript优化总结
来源：互联网 发布：网络招商好做吗 编辑：程序博客网 时间：2024/05/19 00:52
《JavaScript优化总结》
本站原创，转载请标明出处 作者：风情主人 QQ: 1160 2011 http://m9m.3322.org
原文请看:http://sfii.8866.org/r.cgi?num=48&tp=t
看不起小钱就赚了大钱，同样的，看不其一字节两字节的优化，那么就谈不上什么优化了。因此，我们需要从细节做起，从优化每一字节作做起.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("表格有" + o.length + "行"); 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比fnSum快" + (n1 - n2) + "豪秒
");out("fnSum1:" + n2 + "豪秒;结果 = " + s2 + "
");out("fnSum:" + n1 + "豪秒;结果 = " + 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这样的代码
