提高頁面顯示速度的秘技

來源:互聯網
上載者:User
速度|顯示|頁面 在安排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 > 
 
經過這些改動之後,瀏覽器顯示頁面的速度將會更快。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。