提高頁面顯示速度的秘技?


在安排Web頁面的布局時，最常用的方法之一是用HTML表格界定頁面的結構。例如，假設Web頁面由頂端的導航條和它下面的兩欄（列）構成——左邊的列是一個導航條，右邊的列是實際安置內容的區域。對于這樣一個頁面，我們可以用一個兩行、兩列的大表格進行布局：在第一行中，合并兩個列然后放上頂端導航表格；在第二個行中，左邊的列放上一個顯示導航按鈕的表格，右邊的列再用一個表格顯示頁面的實際內容。用這種表格嵌套表格的方法進行布局可以得到非常好的效果。

要制作出這種頁面，我們可以使用如下HTML代碼
　?
<?TABLE?BORDER="0"?>?<?TR?>?<?TD?COLSPAN="2"?><?!--?頂端導航條的內容?--?><?/TD?><?/TR?>?<?TR?>?<?TD?ALIGN="LEFT"?VALIGN="TOP"?><?!--?左邊導航條的內容?--?><?/TD?>?<TD?ALIGN="LEFT"?VALIGN="TOP"?><?!--?頁面內容區域?--?><?/TD?>?<?/TR?>?<?/TABLE?>　


如果瀏覽器發現頁面中有一個TABLE標記，在接收到對應的結束標記<?/TABLE>之前它不會顯示這個表格。因此，如果整個頁面都放入了一個大表格中，在瀏覽器下載這個大表格的<?/TABLE>標記之前整個頁面都不會顯示。當顯示內容非常多的頁面時（例如，搜索結果或者電子商務網站上的產品目錄），表格的延遲顯示會導致整個頁面顯示的停頓。?

　　為了避免出現這種情況，我們應該把頁面劃分成多個較小且獨立的表格區域。這樣的話，每個表格的HTML代碼下載之后瀏覽器就可以立即顯示它。對于瀏覽者來說，頁面將在屏幕上一部分、一部分地逐漸顯示出來。而且更重要的是，這種頁面在屏幕上開始顯示的速度要比前面等待整個頁面下載才顯示的方法快得多。

　　對于前面介紹的例子，我們不是使用單個大表格進行頁面布局，而是使用三個獨立的表格：第一個表格顯示頁面頂端的導航條，使其具有足夠的寬度顯示頁面內容并完整地給出其<TABLE?><?/TABLE>標記對；在第一個表格的左下位置安排第二個表格，使這個表格向左對齊；最后一個表格位于第二個表格的右邊，用于放置頁面內容。由于現在每一部分都是一個獨立的表格，瀏覽器只要下載了任一部分的代碼就會立即顯示它。因此，頁面頂端和左面的導航條將比頁面其余部分更快地顯示出來。這就避免了讓瀏覽者長時間地在空白頁面前等待，而是給了他這樣一種印象：頁面已經開始下載，整個頁面將立刻出現在屏幕上。

　　修改后的布局代碼如下所示：　

　
<?TABLE?BORDER="0"?WIDTH="100%"?>?<?TR?>?<?TD?ALIGN="CENTER"?VALIGN="TOP"><?!--?頂端導航條的內容?--?><?/TD?>?<?/TR?>?<?/TABLE?>?<?TABLE?BORDER="0"ALIGN="LEFT"?>?<?TR?>?<?TD?ALIGN="LEFT"?VALIGN="TOP"?><?!--?左邊導航條的內容?--?></TD?>?<?/TR?>?<?/TABLE?>?<?TABLE?BORDER="0"?>?<?TR?>?<?TD?ALIGN="LEFT"VALIGN="TOP"?><?!--?頁面內容區域?--?><?/TD?>?<?/TR?>?<?/TABLE?>?　


正如盡可能早地關閉TABLE標記使得瀏覽器能夠快速地顯示出表格中的數據，還有另外兩個標記也同樣可以用這種方法提高顯示速度，這兩個標記就是用于制作列表框的<OPTION?>標記和用于制作無序列表的<?LI?>標記。

ASP程序員常常要訪問數據庫獲取數據然后用<?OPTION?>標記構造列表框。只要簡單地改動一下代碼關閉<OPTION?>標記，就可以讓瀏覽器顯示頁面的速度加快。?

　　例如，原先使用下面的代碼：?　?

　
Do?while?not?objRS.EOF?strOptionList?=?strOptionList?&?"<?OPTIONVALUE="""?&?objRS("ID")?&?_?"""?>"?&?objRS("ProductName")?objRS.MoveNextLoop?Response.Write?"<?SELECT?SIZE=""1""?>"?&?strOptionList?&?"<?/SELECT?>"　


　　現在只需改動一行代碼：?　?

　

　
Do?while?not?objRS.EOF?strOptionList?=?strOptionList?&?"<?OPTIONVALUE="""?&?objRS("ID")?&?_?"""?>"?&?objRS("ProductName")?&?"<?/OPTION?>"objRS.MoveNext?Loop?Response.Write?"<?SELECT?SIZE=""1""?>"?&?strOptionList?&""?　


　　如果原來使用的代碼如下：　

　
<?UL?>?<?LI?>蘋果?<?LI?>桔子?<?LI?>香蕉?<?/UL?>?　


　　那么現在改用：?　

　
<?UL?>?<?LI?>蘋果<?/LI?>?<?LI?>桔子<?/LI?>?<?LI?>香蕉<?/LI?>?<?/UL?>?　


　　經過這些改動之后，瀏覽器顯示頁面的速度將會更快。