?? day5_6.html
字號:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312-80">
<style type="text/css">
<!--
a:link { color: blue; text-decoration: none}
a:visited { color: purple; text-decoration: none}
a:hover { color: #CC0033; text-decoration: underline}
-->
</style>
<title>JavaScript高級教程</title>
</head>
<body topmargin="1" leftmargin="2">
<table border="0" width="591" cellspacing="0">
<tr>
<td bgcolor="#ffff99" width="451">JavaScript高級教程 - 第五課</td>
</tr>
<tr>
<td bgcolor="#FF6600" width="451"><a href="mailto:thau@wired.com">Thau</a></td>
</tr>
</table>
<div align="left">
<table border="0" width="630" cellspacing="0">
<tr>
<td width="458" valign="top" align="left" rowspan="2"><small><small><br>
</small></small><strong>第六頁：<font size="3">按速度優化JavaScript代碼</font></strong>
<p>一旦你的JavaScript能運行，你就會想到使其運行得更快。<br>
在講解加速代碼的方法之前，讓我先講講“80/20規則”：<br>
百分之八十的優化是由最初百分之二十的工作所完成的。竭<br>
力實現剩余百分之二十的速度優化是一種巨大的痛苦，而且<br>
經常導致完全不能讀和難以管理的代碼。簡言之，如果你的<br>
JavaScript運行得很慢，你可以用很多簡單的方法來加速它，<br>
但是除非你的代碼確實運行得很慢，我不會對它進行再優化。<br>
下面是一些使你的代碼輕松運行的方法。</p>
<p><strong>限制循環內的工作量</strong></p>
<blockquote>
<p>程序運行慢的最常見原因是循環內的重復工作。如果一<br>
條命令只需要執行一次，就沒有必要把它放在循環內。<br>
例如：</p>
<pre>var index = 0;
while (index <10)
{
var the_date = new Date();
var the_day = the_date.getDay();
var the_name = prompt("what's the kid's name? " ,"");
alert("On " + the_day + " " + the_name + " is a very special person.");
index++;
}
</pre>
<p>此程序循環執行10次。每次得到當天的日期，詢問小孩<br>
的名字，然后打印出“On Monday,so-and-so is a <br>
very special person.”。</p>
<p>但是日期是不會改變的，總是今天。所以沒有必要把前<br>
兩行放在循環中。把它們從循環中拿出來，讓其只執行<br>
一次而不是10次，這樣會節省時間：<br>
var index = 0;<br>
var the_date = new Date();<br>
var the_day = the_date.getDay();<br>
while (index <10)<br>
{<br>
var the_name = prompt("what's the kid's name? " ,"");<br>
alert("On " + the_day + " " + the_name + "
is a very special person.");<br>
index++;<br>
}<br>
</p>
</blockquote>
<p><strong>定制if-then-else語句，按最可能到最不可能的順序</strong></p>
<blockquote>
<p>因為if-then-else語句在遇到條件為真時結束，你可以<br>
通過把最有可能的條件放到最開始來減少需要判斷的語<br>
句的數量。例如：</p>
<pre>var pet = prompt("what kind of pet do you have?", "");
if (pet == "cat")
{
doCatStuff();
} else if (pet == "dog")
{
doDogStuff();
} else if (pet == "bird")
{
doBirdStuff();
} else if (pet == "lizard")
{
doLizardStuff();
}</pre>
<p>一般來說，程序中的if子句比從lizard到dog需要執行的<br>
邏輯判斷要少。</p>
</blockquote>
<p><strong>最小化重復執行的表達式</strong></p>
<blockquote>
<p>如果你發現需要重復計算一個特定的表達式，如<br>
var pi=22/7，只計算一次并把它放在一個全局變量中或<br>
許是個好主意。例如，不象下面程序這樣：<br>
<br>
function theArea(radius)<br>
{<br>
var pi = 22/7;<br>
var area = pi * radius * radius;<br>
return area;<br>
}<br>
<br>
function theCircumference(radius)<br>
{<br>
var pi = 22/7;<br>
var circumference = 2 * pi * radius;<br>
return circumference;<br>
}<br>
</p>
</blockquote>
<blockquote>
<p>而是這樣做：</p>
<p>var pi = 22/7;<br>
function theArea(radius)<br>
{<br>
var area = pi * radius * radius;<br>
return area;<br>
}<br>
function theCircumference(radius)<br>
{<br>
var circumference = 2 * pi * radius;<br>
return circumference;<br>
}<br>
<br>
我知道我在用一個全局變量，我也說過這不是一個好主意。<br>
然而，一些數字，如pi，其值在程序中永遠不會改變，是<br>
此規則的特例。通過只計算pi一次，可以省去額外的計算。<br>
或許時間上的一些小的節省，累加起來會很管用。</p>
<p>如果你發現代碼運行很慢，你只要注意一些事情。這些都<br>
很明顯，但是當你發現你經常忽略象這樣簡單的優化技巧<br>
時，你會很吃驚。</p>
<p>還有，我的朋友，讓我們結束今天的課程，這也是整個<br>
JavaScript高級教程的結束。如果你已經進行到這兒，<br>
并且你至少讀過過去五天課程中的一半，那么你已經看<br>
過很多JavaScript代碼了。實際上，如果你能理解跨越<br>
第一部分和第二部分的10課的大部分內容，你就可以很<br>
安全地把自己稱為“JavaScript助手”。通往神秘真知<br>
的路就在你的腳下。<a href="day5_7.html">>></a></p>
</blockquote>
<p align="left"><font face="宋體" size="3" color="#000000"><strong>JavaScript高級教程</strong></font><font color="#FF0000" face="宋體" size="3"><br>
</font><font color="#FF3300" size="3">第一頁</font><font size="3"> </font><a href="day5_1.html"><font size="3" face="verdana, arial, geneva, sans-serif">JavaScript</font><font size="3">高級教程</font><font size="3" face="verdana, arial, geneva, sans-serif">-
</font><font size="3">第</font><font size="3" face="verdana, arial, geneva, sans-serif">5</font><font size="3">天</font></a><font size="3">
<br>
</font><font color="#FF3300" size="3">第二頁 </font><font size="3"><a href="day5_2.html">打印變量</a><br>
</font><font color="#FF3300" size="3">第三頁 </font><font size="3"><a href="day5_3.html">一般性程序錯誤</a><br>
</font><font color="#FF3300" size="3">第四頁 </font><font size="3"><a href="day5_4.html">修正錯誤</a><br>
</font><font color="#FF3300" size="3">第五頁 </font><font size="3"><a href="day5_5.html">好的編程實踐</a><br>
</font><font color="#FF3300" size="3">第六頁 </font><font size="3">按速度優化JavaScript代碼<br>
</font><font color="#FF3300" size="3">第七頁 </font><a href="day5_7.html"><font size="3">下面講什么？</font></a></p>
<p align="left">[<a href="day1_1.html">第1課</a>][<a href="day2_1.html">第2課</a>][<a href="day3_1.html">第3課</a>][<a href="day4_1.html">第4課</a>][第5課]</p>
<hr align="left">
<!--webbot bot="Include" U-Include="../../copyright.html" TAG="BODY" startspan -->
<p><font face="verdana, arial, geneva, sans-serif" size="2"><a href="http://phtshop.yeah.net" target="_top">本文根據
網猴 相關文章改編，版權歸原作者所有。</a> </font></p>
<!--webbot bot="Include" endspan i-checksum="63119" --> </td>
</tr>
<tr> </tr>
</table>
</div>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -