优化你的网页

Author: 费文骅 Date: 2000年 第13期

  这几乎是所有网络冲浪者的悲哀:“喜爱你的站点,但不喜欢太久的等待”,这不是无价值的抱怨。如果用户不得不花太多的时间去等待你的网页在屏幕上显示出来,那么他很可能便会放弃并转向其他站点。你无法改变Internet的慢速,但是,你可以采取一些快速并且简单的技术来保证你的站点尽可能地被快速下载。
#1  将表格打散
  最普通的版面设计方法是使用“表格”,支持样式单的浏览器的广泛应用会改变这种状况,但直到现在网页制作者们仍坚持使用复杂的表格进行版面设计。不幸的是,如果你的页面中的所有元素都包含在一个大的表格中,那么,浏览器不得不将整个表格内容都下载下来后才开始显示它们。为了避免这种延迟,将一个大表格分成若干独立的表格是一个不错的主意。你还必须注意不要放置无用的表格结构,特别是使用那些所见即所得的工具,如NetObjects Fusion或FrontPage。这类工具只会增加一些无用的单元格、行或列。虽然它们是空的,但会使速度变慢,因为浏览器不得不对它进行解释并在屏幕上显示出来。
#1  避免嵌套表格
  当使用表格来进行版面设计时,将表格进行嵌套以获得对页面元素布局的控制是十分诱人的。但是,越是复杂的表格,浏览器解释并渲染的时间就越长。Netscape的浏览器在这方面显得很差——超过4到5层的嵌套会导致PC长时间的等待。如果你的表格的嵌套层数超过了3层,那你该考虑改变一下版面设计了。虽然要完全避免多嵌套的表格并不容易,但尝试一下是很值得的。
#1  知道何时不该用HTML代码
  许多网页设计者相信,要显示相同的效果时,用HTML代码总比用图片来得快。但事实上,并不总是这样。有时,使用适当的图片比用HTML代码更快。
  例如,新浪网右上角的导航栏就是使用了一系列的GIF图片,事实证明,要用HTML来设计相同效果的导航栏要花去更多的字节数,并且这些代码不得不在每次访问页面时重新被下载。而GIF文件只下载一次便可重复使用。
#1  脚本运行优化
  相当多的网页作者喜欢将JavaScript或Vbscript放在<HEAD>中,以便在剩下的页面下载前将脚本启动。然而,在<HEAD>中放置大的脚本程序会使得整个页面的下载及渲染速度减慢。要使运行脚本程序带来的延迟减至最小程度,就要将脚本程序化整为零。将那些要立刻使用的脚本程序放在<HEAD>中,将其他的脚本放在使用的地方。例如,你使用一个脚本程序来检验用户输入表单中的数据是否合法。这段程序是用不着放在<HEAD>中的,只要将它放在表单之后即可。
#1  运用CSS
  冗余HTML代码的另一大来源便是使用“所见即所得”的网页制作工具。这些工具经常使用异常复杂的表格来布置页面元素,就像下面显示的例子那样:
  <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=340>
  <TR VALIGN=″top″ ALIGN=″left″>
  <td WIDTH=175>
  <p>The site for site builders</td>
  <td width=″25″><img src=″bump.gif″ width=″25″ height=″1″ border=″0″></td>
  <td></td>
  </tr>
  <TR VALIGN=″TOP″ ALIGN=″LEFT″>
  <TD COLSPAN=″3″ HEIGHT=″50″></TD>
  </TR>
  <TR VALIGN=″top″ ALIGN=″left″>
  <TD COLSPAN=2 HEIGHT=75></TD>
  <TD WIDTH=140 ALIGN=″center″ VALIGN=″middle″ ALIGN=″center″ VALIGN=″middle″><IMG HEIGHT=75 WIDTH=140 SRC=″speed.gif″ BORDER=0></TD>
  </TR>
  <TABLE>
  如果你知道你的用户在使用IE 4.0及以上版本的浏览器,那么大幅度减少HTML代码量的最切实可行的办法便是使用CSS来布置页面元素。下面就是使用CSS的例子,它用了比上例少得多的代码却实现了相同的排版效果。
  <p>The site for site builders
  <DIV style=″position:relative;top:50;left:200″>
  <IMG width=140 height=75 border=0 src=″speed.gif″>
  </DIV>