《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豪秒;結果 = 279072
fnSum: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這樣的代碼
