📄 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 + -