JavaScript的除錯和優化
一、常見的錯誤和異常
1、拼寫錯誤
2、訪問不存在的變數：變數名未對應上
3、括號不匹配
4、字串和變數連線錯誤：漏寫加號等
5、等號與賦值混淆：“==”不等於“=”
二、錯誤處理
1、使用alert()和document.write()方法監視變數值
兩者的區別在於alert()方法在彈出對話方塊顯示變數值的同時，也會停止程式碼的繼續執行，直到使用者點選“確定”按鈕。而document.write()則在輸出值之後依舊會繼續執行程式碼。
2、使用onerror事件找到錯誤
通過遮蔽瀏覽器本身的程式碼除錯錯誤，使用自己定義的onerror事件，找到並顯示錯誤的具體位置及情況。
1View Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>onerror</title> 6 <script language="javascript"> 7window.onerror=function(sMessage,sUrl,sLine){ 8 alert("出錯啦:\n"+sMessage+"\nUrl:"+sUrl+"\n行號："+sLine); 9 return true; //遮蔽系統事件 10 } 11 </script> 12 </head> 13 <body onload="nonExistent()"> 14 </body> 15</html>
3、用try...catch語句找到錯誤
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>onerror</title> 6 <script language="javascript"> 7 try{ 8 alert("this is an example"); 9 alert(fresheggs); 10 }catch(exception){ 11 var sError=""; 12 for(var i in exception) 13 sError+=i+":"+exception[i]+"\n"; 14 alert(sError); 15 } 16 </script> 17 </head> 18 <body> 19 </body> 20 </html>try...catch使用舉例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>onerror</title> 6 <script language="javascript"> 7 try{ 8 alert("this is an example")); //出現括號不匹配了，但是trycatch不會執行catch模組 9 }catch(exception){ 10 var sError=""; 11 for(var i in exception) 12 sError+=i+":"+exception[i]+"\n"; 13 alert(sError); 14 } 15 </script> 16 </head> 17 <body> 18 </body> 19 </html>try...catch侷限性
三、使用偵錯程式
1、用Firefox錯誤控制檯除錯
Firefox的錯誤控制檯是瀏覽器自帶的一個JavaScript偵錯程式，可以通過F12快捷方式開啟。
2、用Microsoft Script Debugger 除錯
此外掛可以在Microsoft官網免費下載，具體使用方法可以自行百度。此除錯方法可能會存在導致IE瀏覽器死掉的情況，只要重啟瀏覽器就能恢復使用。目前不推薦此除錯方式。
3、用Venkman除錯
這款是針對Mozilla的指令碼偵錯程式，他的工能很強大，推薦使用這種除錯方式
四、JavaScript優化
優化的主要目的是為了加快程式碼的下載速度以及執行效率。
1、減緩程式碼下載時間
1）去除程式碼前後空格、註釋、換行等多餘字元
2）true和false可以用1和0來代替
3）undefined、null或者false可以用！來代替
4）new Array()可以直接用[]代替
5）長的變數或者函式名可以取縮寫
實用的自動優化小工具：ECMAScript Cruncher、JSMin、Online JavaScript Comressor 等。
2、合理宣告變數
如果在函式體中，如果沒有特別的需要，儘量不要宣告全域性變數，儘量使用var宣告，從而節省系統資源。
3、使用內建函式縮短編譯時間
如果有內建函式可以使用，儘量避免使用自己定義的函式。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>內建函式</title> 6 <script language="javascript"> 7 function myPower(iNum,n){ 8 var iResult=iNum; 9 for(var i=1;i<n;i++) 10 iResult*=iNum; 11 return iResult; 12 } 13 var myDate1=new Date(); 14 for(var i=0;i<150000;i++){ 15 myPower(7,8); //自定義方法 16 } 17 var myDate2=new Date(); 18 document.write(myDate2-myDate1); 19 document.write("<br>"); 20 myDate1=new Date(); 21 for(var i=0;i<150000;i++){ 22 Math.pow(7,8); //採用系統內建方法 23 } 24 myDate2=new Date(); 25 document.write(myDate2-myDate1); 26 </script> 27 </head> 28 <body> 29 </body> 30 </html>View Code
4、合理書寫if語句
在使用if和else語句時，一定要把最有可能的情況放在第一個，並且儘量減少else if 語句的使用，可以用else{if（）{}}巢狀的方式替換。
5、最小化語句數量
將可以壓縮在一起的語句，儘量縮小壓縮在一起。
6、節約使用DOM
JavaScript對DOM的處理可能是最耗時的操作之一。因此，應當儘量減少DOM的操作，將列表專案在新增文字節點之後再新增。