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