核心導讀：在服裝管理軟件開發應用過程中，特別對于使用B/S架構開發POS系統，提高系統運行速度是關鍵。使用javascript是提高性能方式之一
很久就想總結一下關于javascript性能優化方面的一些東西，平時也有注意收集這方面的資料。把del.icio.us里的收藏的東西翻出來看一遍，才驚奇地發現，這些所謂的優化方法大多出自《javascript高級程序設計》一書，當然也有個別
不一樣的。總之這本書上關于javascript性能優化的內容足足用了近20頁來進行闡述，所以今天我也照本宣科地來介紹一下，同時收錄其他方法。
javascript的性能優化應分為兩部分：下載時間和執行時間。
下載時間
javascript作為一種解釋性語言不同于其他編程語言。在諸如java,c,c++的語言中，開發人員根本無需考慮變量名的長度以及長篇大論的注釋，因為這些在編譯時都會被刪除。
但是web瀏覽器下載的是javascript的源代碼，你編寫的javascript程序文件會原模原樣地下載到客戶端。而這些長變量名和注釋就會影響腳本的下載時間。單個TCP-IP包中能放入的字節數是1160，所以最好將每個javascript文件的大小控制在1160字節以內以獲取最優的下載時間。
javascript文件中的任何字節，不管是空格，還是換行都會影響javascript文件的下載時間，所以在部署任何javascript文件之前，都應該盡可能地優化腳本文件的體積。以下是一些常用的優化javascript文件大小的方法：
1、刪除注釋
腳本中的任何注釋都應該在部署之前被刪除。雖然注釋對于開發人員來說意義重大，但在部署時這些注釋對客戶端用戶是沒有任何實質意義的，而更可怕的是很多javascript源代碼中的注釋會比代碼多得多。因此刪除注釋是所見javascript文件大小最為方便有效的途徑。
2、刪除制表符和空格
又規律地縮進代碼有增強代碼的可閱讀性，但是瀏覽器/客戶端用戶并不需要這些額外的制表符和可個，所以最好刪除它們，包括函數參數，賦值語句和比較操作符之間的空格：
和前一條規則一樣，只要你在程序的每行結尾都正確地添加了分號，那么就不需要再添加換行符了。
4、替換變量名
此方法很無聊，大致做法就是將所有變量名替換成無意義的簡短變量名。
要手動地完成以上四步，在實際中可能會有一定的難度，那么下面的一些鏈接可能對你有所幫助。
ECMAScript Cruncher：http://saltstorm.net/depo/esc/
JSMin（The JavaScript Minifier）: http://www.crockford.com/javascript/jsmin.html
Online JavaScript Compressor：http://dean.edwards.name/packer/
5、替換布爾值
對于比較來說，true等譯1，false等于0。因此可以將字面量的true都用1來替換，而false用0來替換，進而較少一定的字節數。
6、縮短否定檢測
代碼中常常會出現檢測某個值時候有效的語句。而大部分否定測試所做的就是判斷某個變量是否為undefined、null或者false，如下：
執行時間
javascript是一種解釋性語言，它的執行速度要大大慢于編譯型語言。據測試，javascript的執行效率要比編譯型的C程序慢5000倍；比解釋型的Java慢100倍；比解釋型的Perl慢10倍。但是我們仍然可以通過一些簡單的事情來提高javascript的效率，同時這也顯得更加重要。
1、使用局部變量
在函數中，總是使用var來定義變量。無論何時使用var都會在當前的范圍類創建一個局部變量。如果不使用var來定義變量，那么變量會被創建在window范圍內，那么每次使用這個變量的時候，解釋程序都會搜索整個范圍樹。同時全局變量要在頁面從瀏覽器中卸載后才銷毀，而局部變量在函數執行完畢即可銷毀，過多的全局變量增加了不必要的內存消耗。
2、避免使用with語句
使用with語句能夠減少一定的代碼長度，但是在使用with語句時，要強制解釋程序不僅在范圍樹內查找局部變量，還強制檢測每個變量及指定的對象，看其是否為特性。因為，我們也可以在函數中定義同明的變量。
3、選擇正確的算法
只要有可能就應該用局部變量或者數字索引的數組來替代命名特性。如果命名特性要多次使用，就先將它的值存儲在局部變量中，避免多次使用線性算法請求命名特性的值。
循環在各種編程語言中得到大量應用，所以保持循環的高效性尤為重要。按照反向的順序進行循環迭代是一種有效的方法。
5、翻轉循環
用do..while循環來替代while循環以進一步減少執行時間。假設有如下while循環：
這段代碼比用while循環更快，因為它用循環反轉來進一步地優化：
6、展開循環
可以考慮將循環展開，一次執行多個語句。考慮如下for循環例子：
循環總共要執行20次，每次都是對變量sum進行增量操作，但是可以這樣寫：
在循環體內做了五次增量。每次增量后，都對變量i加1，所以多數組的遍歷與原來是一致的，但是控制語句只執行了四次，減少了執行時間。當然還可以繼續優化：
7、優化if語句
使用if語句和多個else語句時，一定要把最有可能的情況放在第一個，然后是第二可能出現的情況，如此排列，這樣就減少了要進行多次測試才能遇到正確條件的情況。
同時也要盡量減少else if語句的數量，并且將條件按照二叉樹的方式進行排列。例如：
8、switch和if
一般來說超過兩種情況時，最好使用switch語句。常用switch來代替if語句，最高可令執行快10倍。在javascript中就更加可以從中獲益，因為case語句可以使用任何類型的值。
9、避免字符串連接
一旦一次要使用多個字符串的連接（比如，大于五個），最好使用如下方式：
只要可能，就應該考慮優先使用內置方法。因為內置方法是用C++或者C之類的語言編譯的，運行起來比必須實時編譯的javascript要高效的多。比如你可能像要自己編寫一個求階乘的函數，但是實際上你應該使用javascript內置的Math.pow()方法。
11、存儲常用的值
當多次使用到一個值得時候，可先將其存儲在局部變量中以便快速訪問。尤其對于通常使用對象的特性來進行訪問的值更加重要。如：
document.body.clientWidth在該例中被使用了兩次，但它是使用命名特性（屬于極其昂貴的操作）來獲取的。可以使用局部變量來重寫這段代碼：
12、最小化語句數量
我們有理由相信，腳本中語句越少，執行所需要的時間越短。很多方法可以將javascript中的語句數量減到最少，比如定義變量時，處理迭代數字時，使用數組和對象字面量時。
多個變量的定義可用一個var語句來替代：
插入迭代子
使用迭代子（在不同位置上加減的值）時，盡可能合并語句。考慮下面代碼：
13、節約使用DOM
不管是添加、刪除或者是其他對頁面DOM內部結構的更改，都會導致整個頁面的重新渲染，帶來的是明顯的時間消耗。解決這個問題的方法是盡可能地對不在DOM文檔中的元素節點進行操作。如下例子：
每次執行I都會對整個頁面重新渲染一次，執行II又會對整個頁面重新渲染一次，總共會有20次的對頁面的渲染。我們大可使用文檔碎片來保存所有列表項，最后再一起添加到文檔中。
其他一些優化方法
1、不要使用eval
使用eval相當于在運行時再次調用解釋引擎對內容進行運行，需要消耗大量時間。這時候使用JavaScript所支持的閉包可以實現函數模版（關于閉包的內容請參考函數式編程的有關內容）
2、類型轉換
類型轉換是大家常犯的錯誤，因為JavaScript是動態類型語言，你不能指定變量的類型。
對字符串進行循環操作，譬如替換、查找，應使用正則表達式，因為本身JavaScript的循環速度就比較慢，而正則表達式的操作是用C寫成的語言的API，性能很好。
4、DOM相關
不一樣的。總之這本書上關于javascript性能優化的內容足足用了近20頁來進行闡述，所以今天我也照本宣科地來介紹一下，同時收錄其他方法。
javascript的性能優化應分為兩部分：下載時間和執行時間。
下載時間
javascript作為一種解釋性語言不同于其他編程語言。在諸如java,c,c++的語言中，開發人員根本無需考慮變量名的長度以及長篇大論的注釋，因為這些在編譯時都會被刪除。
但是web瀏覽器下載的是javascript的源代碼，你編寫的javascript程序文件會原模原樣地下載到客戶端。而這些長變量名和注釋就會影響腳本的下載時間。單個TCP-IP包中能放入的字節數是1160，所以最好將每個javascript文件的大小控制在1160字節以內以獲取最優的下載時間。
javascript文件中的任何字節，不管是空格，還是換行都會影響javascript文件的下載時間，所以在部署任何javascript文件之前，都應該盡可能地優化腳本文件的體積。以下是一些常用的優化javascript文件大小的方法：
1、刪除注釋
腳本中的任何注釋都應該在部署之前被刪除。雖然注釋對于開發人員來說意義重大，但在部署時這些注釋對客戶端用戶是沒有任何實質意義的，而更可怕的是很多javascript源代碼中的注釋會比代碼多得多。因此刪除注釋是所見javascript文件大小最為方便有效的途徑。
2、刪除制表符和空格
又規律地縮進代碼有增強代碼的可閱讀性，但是瀏覽器/客戶端用戶并不需要這些額外的制表符和可個，所以最好刪除它們，包括函數參數，賦值語句和比較操作符之間的空格：
function doSomething ( arg1, arg2, arg3 ){
alert(arg1 + arg2 + arg3);
}
function doSomething(arg1,arg2,arg3){alert(arg1+arg2+arg3);}
3、刪除所有換行alert(arg1 + arg2 + arg3);
}
function doSomething(arg1,arg2,arg3){alert(arg1+arg2+arg3);}
和前一條規則一樣，只要你在程序的每行結尾都正確地添加了分號，那么就不需要再添加換行符了。
4、替換變量名
此方法很無聊，大致做法就是將所有變量名替換成無意義的簡短變量名。
要手動地完成以上四步，在實際中可能會有一定的難度，那么下面的一些鏈接可能對你有所幫助。
ECMAScript Cruncher：http://saltstorm.net/depo/esc/
JSMin（The JavaScript Minifier）: http://www.crockford.com/javascript/jsmin.html
Online JavaScript Compressor：http://dean.edwards.name/packer/
5、替換布爾值
對于比較來說，true等譯1，false等于0。因此可以將字面量的true都用1來替換，而false用0來替換，進而較少一定的字節數。
6、縮短否定檢測
代碼中常常會出現檢測某個值時候有效的語句。而大部分否定測試所做的就是判斷某個變量是否為undefined、null或者false，如下：
if(oTest != undefined){
//dosomething
}
if(oTest != null){
//dosomething
}
if(oTest != false){
//dosomething
}
//這樣寫更簡潔
if(!oTest){
//dosomethin
}
7、使用數組和對象變量
//dosomething
}
if(oTest != null){
//dosomething
}
if(oTest != false){
//dosomething
}
//這樣寫更簡潔
if(!oTest){
//dosomethin
}
var aTest = new Array;
var oTest = new Object;
oTest.pro1 = "pro1"
oTest.pro2 = "pro2";
和下面的代碼作用是完全相同的，但是下面的代碼可以節省更多的字節。
var oTest = new Object;
oTest.pro1 = "pro1"
oTest.pro2 = "pro2";
var aTest = [];
var oTest = {pro1:"pro1",pro2:"pro2"};
var oTest = {pro1:"pro1",pro2:"pro2"};
執行時間
javascript是一種解釋性語言，它的執行速度要大大慢于編譯型語言。據測試，javascript的執行效率要比編譯型的C程序慢5000倍；比解釋型的Java慢100倍；比解釋型的Perl慢10倍。但是我們仍然可以通過一些簡單的事情來提高javascript的效率，同時這也顯得更加重要。
1、使用局部變量
在函數中，總是使用var來定義變量。無論何時使用var都會在當前的范圍類創建一個局部變量。如果不使用var來定義變量，那么變量會被創建在window范圍內，那么每次使用這個變量的時候，解釋程序都會搜索整個范圍樹。同時全局變量要在頁面從瀏覽器中卸載后才銷毀，而局部變量在函數執行完畢即可銷毀，過多的全局變量增加了不必要的內存消耗。
2、避免使用with語句
使用with語句能夠減少一定的代碼長度，但是在使用with語句時，要強制解釋程序不僅在范圍樹內查找局部變量，還強制檢測每個變量及指定的對象，看其是否為特性。因為，我們也可以在函數中定義同明的變量。
3、選擇正確的算法
只要有可能就應該用局部變量或者數字索引的數組來替代命名特性。如果命名特性要多次使用，就先將它的值存儲在局部變量中，避免多次使用線性算法請求命名特性的值。
var aValues = [1,2,3,4,5,6,7];
function testFunc(){
for(var i=0, iCount=aValues.length; i++){
alert(i + "/" + iCount + "=" + aValues[i]);
}
}
4、反轉循環function testFunc(){
for(var i=0, iCount=aValues.length; i++){
alert(i + "/" + iCount + "=" + aValues[i]);
}
}
循環在各種編程語言中得到大量應用，所以保持循環的高效性尤為重要。按照反向的順序進行循環迭代是一種有效的方法。
for(var i=aValues.length-1; i >= 0; i--){
//do something
}
反轉循環有利于減低算法的復雜度。它用常數0作為循環控制語句以減小執行時間。//do something
}
5、翻轉循環
用do..while循環來替代while循環以進一步減少執行時間。假設有如下while循環：
var i=0;
while(i < aValues.length){
//do something
i++;
}
可用do..while循環重寫上面的代碼而不改變行為：
while(i < aValues.length){
//do something
i++;
}
var i=0;
do{
//do something
i++;
}while(i < aValues.length)
do{
//do something
i++;
}while(i < aValues.length)
這段代碼比用while循環更快，因為它用循環反轉來進一步地優化：
var i=aValues.length-1;
do{
//do something
i--;
}while(i>=0)
也可以將自減操作直接放進控制語句中，以減少額外的語句。
do{
//do something
i--;
}while(i>=0)
var i=aValues.length-1;
do{
//do somethin
}while(--i>=0)
這個循環已經被完全優化了do{
//do somethin
}while(--i>=0)
6、展開循環
可以考慮將循環展開，一次執行多個語句。考慮如下for循環例子：
var sum = 0;var aValues=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
for(var i=0; i<aValues.length; i++){
sum+=aValues[i];
}
for(var i=0; i<aValues.length; i++){
sum+=aValues[i];
}
循環總共要執行20次，每次都是對變量sum進行增量操作，但是可以這樣寫：
var aValues=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
var sum = 0;
for(var i=0; i<aValues.length; i++){
sum+=aValues[i];
i++;
sum+=aValues[i];
i++;
sum+=aValues[i];
i++;
sum+=aValues[i];
i++;
sum+=aValues[i];
i++;
}
var sum = 0;
for(var i=0; i<aValues.length; i++){
sum+=aValues[i];
i++;
sum+=aValues[i];
i++;
sum+=aValues[i];
i++;
sum+=aValues[i];
i++;
sum+=aValues[i];
i++;
}
在循環體內做了五次增量。每次增量后，都對變量i加1，所以多數組的遍歷與原來是一致的，但是控制語句只執行了四次，減少了執行時間。當然還可以繼續優化：
var aValues=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
var sum = 0;
for(var i=0; i<aValues.length; i++){
sum+=aValues[i++];
sum+=aValues[i++];
sum+=aValues[i++];
sum+=aValues[i++];
sum+=aValues[i++];
}
關于此算法的更多信息可以參考這里http://home.earthlink.net/~kendrasg/info/js_opt/var sum = 0;
for(var i=0; i<aValues.length; i++){
sum+=aValues[i++];
sum+=aValues[i++];
sum+=aValues[i++];
sum+=aValues[i++];
sum+=aValues[i++];
}
7、優化if語句
使用if語句和多個else語句時，一定要把最有可能的情況放在第一個，然后是第二可能出現的情況，如此排列，這樣就減少了要進行多次測試才能遇到正確條件的情況。
同時也要盡量減少else if語句的數量，并且將條件按照二叉樹的方式進行排列。例如：
if(iNum>0){
if(iNum>10){
alert("Between 0 and 10");
}else{
if(iNum>20){
alert("Between 10 and 20");
}else{
if(iNum<30){
alert("Between 20 and 30");
}else{
alert("Greater than or equal to 30");
}
}
}
}else{
alert("Less than or equal to 0");
}
if(iNum>10){
alert("Between 0 and 10");
}else{
if(iNum>20){
alert("Between 10 and 20");
}else{
if(iNum<30){
alert("Between 20 and 30");
}else{
alert("Greater than or equal to 30");
}
}
}
}else{
alert("Less than or equal to 0");
}
8、switch和if
一般來說超過兩種情況時，最好使用switch語句。常用switch來代替if語句，最高可令執行快10倍。在javascript中就更加可以從中獲益，因為case語句可以使用任何類型的值。
9、避免字符串連接
一旦一次要使用多個字符串的連接（比如，大于五個），最好使用如下方式：
var buf = new Array();
for(var i = 0; i < 100; i++){
buf.push(i.toString());
}
var all = buf.join("");
10、優先使用內置方法for(var i = 0; i < 100; i++){
buf.push(i.toString());
}
var all = buf.join("");
只要可能，就應該考慮優先使用內置方法。因為內置方法是用C++或者C之類的語言編譯的，運行起來比必須實時編譯的javascript要高效的多。比如你可能像要自己編寫一個求階乘的函數，但是實際上你應該使用javascript內置的Math.pow()方法。
11、存儲常用的值
當多次使用到一個值得時候，可先將其存儲在局部變量中以便快速訪問。尤其對于通常使用對象的特性來進行訪問的值更加重要。如：
oDiv1.style.left = document.body.clientWidth;
oDiv2.style.left = document.body.clientWidth;
oDiv2.style.left = document.body.clientWidth;
document.body.clientWidth在該例中被使用了兩次，但它是使用命名特性（屬于極其昂貴的操作）來獲取的。可以使用局部變量來重寫這段代碼：
var iClientWidth = document.body.clientWidth;
oDiv1.style.left = iClientWidth;
oDiv2.style.left = iClientWidth;
oDiv1.style.left = iClientWidth;
oDiv2.style.left = iClientWidth;
12、最小化語句數量
我們有理由相信，腳本中語句越少，執行所需要的時間越短。很多方法可以將javascript中的語句數量減到最少，比如定義變量時，處理迭代數字時，使用數組和對象字面量時。
多個變量的定義可用一個var語句來替代：
var iFive = 5, sColor = "red", aValues = [1,2,3], oDate = new Date();
插入迭代子
使用迭代子（在不同位置上加減的值）時，盡可能合并語句。考慮下面代碼：
var sName = aValues[i];
i++;
這樣寫更簡短：
i++;
var sName = aValues[i++];
13、節約使用DOM
不管是添加、刪除或者是其他對頁面DOM內部結構的更改，都會導致整個頁面的重新渲染，帶來的是明顯的時間消耗。解決這個問題的方法是盡可能地對不在DOM文檔中的元素節點進行操作。如下例子：
var oUL = document.getElementById("ulItems");
for(var i=0; i<10; i++){
var oLI = document.createElement("li");
oUL.appendChild(oLI); //I
oLI.appendChild(document.createTextNode("Item "+i)); //II
}
for(var i=0; i<10; i++){
var oLI = document.createElement("li");
oUL.appendChild(oLI); //I
oLI.appendChild(document.createTextNode("Item "+i)); //II
}
每次執行I都會對整個頁面重新渲染一次，執行II又會對整個頁面重新渲染一次，總共會有20次的對頁面的渲染。我們大可使用文檔碎片來保存所有列表項，最后再一起添加到文檔中。
var oUL = document.getElementById("ulItems");
var oFragment = document.createDocumentFragment();
for(var i=0; i<10; i++){
var oLI = document.createElement("li");
oLI.appendChild(document.createTextNode("Item "+i));
oFragment.appendChild(oLI);
}
oUL.appendChild(oFragment);
這樣對文檔中DOM樹的操作就只有一次。var oFragment = document.createDocumentFragment();
for(var i=0; i<10; i++){
var oLI = document.createElement("li");
oLI.appendChild(document.createTextNode("Item "+i));
oFragment.appendChild(oLI);
}
oUL.appendChild(oFragment);
其他一些優化方法
1、不要使用eval
使用eval相當于在運行時再次調用解釋引擎對內容進行運行，需要消耗大量時間。這時候使用JavaScript所支持的閉包可以實現函數模版（關于閉包的內容請參考函數式編程的有關內容）
2、類型轉換
類型轉換是大家常犯的錯誤，因為JavaScript是動態類型語言，你不能指定變量的類型。
- 把數字轉換成字符串，應用”" + 1，雖然看起來比較丑一點，但事實上這個效率是最高的，性能上來說：(“” + ) > String() > .toString() > new String()這條其實和下面的“直接量”有點類似，盡量使用編譯時就能使用的內部操作要比運行時使用的用戶操作要快。String()屬于內部函數，所以速度很快，而.toString()要查詢原型中的函數，所以速度遜色一些，new String()用于返回一個精確的副本。
- 浮點數轉換成整型，這個更容易出錯，很多人喜歡使用parseInt()，其實parseInt()是用于將字符串轉換成數字，而不是浮點數和整型之間的轉換，我們應該使用Math.floor()或者Math.round()。另外，和第二節的對象查找中的問題不一樣，Math是內部對象，所以Math.floor()其實并沒有多少查詢方法和調用的時間，速度是最快的。
- 對于自定義的對象，如果定義了toString()方法來進行類型轉換的話，推薦顯式調用toString()，因為內部的操作在嘗試所有可能性之后，會嘗試對象的toString()方法嘗試能否轉化為String，所以直接調用這個方法效率會更高
對字符串進行循環操作，譬如替換、查找，應使用正則表達式，因為本身JavaScript的循環速度就比較慢，而正則表達式的操作是用C寫成的語言的API，性能很好。
4、DOM相關
- 插入HTML 很多人喜歡在JavaScript中使用document.write來給頁面生成內容。事實上這樣的效率較低，如果需要直接插入HTML，可以找一個容器元素，比如指定一個div或者span，并設置他們的innerHTML來將自己的HTML代碼插入到頁面中。
- 創建節點 盡量避免只是使用html字符串來創建節點。因為這樣做既無法保證代碼的有效性，同時字符串的操作效率有極低。所以應該是用document.createElement()方法，而如果文檔中存在現成的樣板節點，應該是用cloneNode()方法，因為使用createElement()方法之后，你需要設置多次元素的屬性，使用cloneNode()則可以減少屬性的設置次數——同樣如果需要創建很多元素，應該先準備一個樣板節點。
- 定時器 如果針對的是不斷運行的代碼，不應該使用setTimeout，而應該是用setInterval。setTimeout每次要重新設置一個定時器