优化你的网页
#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>