建站知識

網(wǎng)站資訊動態(tài),網(wǎng)站建設(shè)知識,網(wǎng)站優(yōu)化SEO,營銷型網(wǎng)站建設(shè),手機(jī)網(wǎng)站建設(shè),搜索引擎營銷,常見問題解答,外貿(mào)網(wǎng)站建設(shè)等相關(guān)知識與動態(tài)。

您當(dāng)前所在位置:首頁 > 建站知識 > 網(wǎng)站建設(shè)知識 > 正文

提高頁面顯示速度的秘技

2011-12-23
在安排Web頁面的布局時(shí),最常用的方法之一是用HTML表格界定頁面的結(jié)構(gòu)。例如,假設(shè)Web頁面由頂端的導(dǎo)航條和它下面的兩欄(列)構(gòu)成——左邊的列是一個(gè)導(dǎo)航條,右邊的列是實(shí)際安置內(nèi)容的區(qū)域。對于這樣一個(gè)頁面,我們可以用一個(gè)兩行、兩列的大表格進(jìn)行布局:在第一行中,合并兩個(gè)列然后放上頂端導(dǎo)航表格;在第二個(gè)行中,左邊的列放上一個(gè)顯示導(dǎo)航按鈕的表格,右邊的列再用一個(gè)表格顯示頁面的實(shí)際內(nèi)容。用這種表格嵌套表格的方法進(jìn)行布局可以得到非常好的效果。 要制作出這種頁面,我們可以使用如下HTML代碼: < TABLE BORDER="0" > < TR > < TD COLSPAN="2" >< !-- 頂端導(dǎo)航條的內(nèi)容 -- >< /TD > < /TR > < TR > < TD ALIGN="LEFT" VALIGN="TOP" >< !-- 左邊導(dǎo)航條的內(nèi)容 -- >< /TD > < TD ALIGN="LEFT" VALIGN="TOP" >< !-- 頁面內(nèi)容區(qū)域 -- >< /TD > < /TR > < /TABLE >   如果瀏覽器發(fā)現(xiàn)頁面中有一個(gè)TABLE標(biāo)記,在接收到對應(yīng)的結(jié)束標(biāo)記< /TABLE >之前它不會顯示這個(gè)表格。因此,如果整個(gè)頁面都放入了一個(gè)大表格中,在瀏覽器下載這個(gè)大表格的< /TABLE >標(biāo)記之前整個(gè)頁面都不會顯示。當(dāng)顯示內(nèi)容非常多的頁面時(shí)(例如,搜索結(jié)果或者電子商務(wù)網(wǎng)站上的產(chǎn)品目錄),表格的延遲顯示會導(dǎo)致整個(gè)頁面顯示的停頓。   為了避免出現(xiàn)這種情況,我們應(yīng)該把頁面劃分成多個(gè)較小且獨(dú)立的表格區(qū)域。這樣的話,每個(gè)表格的HTML代碼下載之后瀏覽器就可以立即顯示它。對于瀏覽者來說,頁面將在屏幕上一部分、一部分地逐漸顯示出來。而且更重要的是,這種頁面在屏幕上開始顯示的速度要比前面等待整個(gè)頁面下載才顯示的方法快得多。   對于前面介紹的例子,我們不是使用單個(gè)大表格進(jìn)行頁面布局,而是使用三個(gè)獨(dú)立的表格:第一個(gè)表格顯示頁面頂端的導(dǎo)航條,使其具有足夠的寬度顯示頁面內(nèi)容并完整地給出其< TABLE >< /TABLE >標(biāo)記對;在第一個(gè)表格的左下位置安排第二個(gè)表格,使這個(gè)表格向左對齊;最后一個(gè)表格位于第二個(gè)表格的右邊,用于放置頁面內(nèi)容。由于現(xiàn)在每一部分都是一個(gè)獨(dú)立的表格,瀏覽器只要下載了任一部分的代碼就會立即顯示它。因此,頁面頂端和左面的導(dǎo)航條將比頁面其余部分更快地顯示出來。這就避免了讓瀏覽者長時(shí)間地在空白頁面前等待,而是給了他這樣一種印象:頁面已經(jīng)開始下載,整個(gè)頁面將立刻出現(xiàn)在屏幕上。   修改后的布局代碼如下所示: < TABLE BORDER="0" WIDTH="100%" > < TR > < TD ALIGN="CENTER" VALIGN="TOP" >< !-- 頂端導(dǎo)航條的內(nèi)容 -- >< /TD > < /TR > < /TABLE > < TABLE BORDER="0" ALIGN="LEFT" > < TR > < TD ALIGN="LEFT" VALIGN="TOP" >< !-- 左邊導(dǎo)航條的內(nèi)容 -- >< /TD > < /TR > < /TABLE > < TABLE BORDER="0" > < TR > < TD ALIGN="LEFT" VALIGN="TOP" >< !-- 頁面內(nèi)容區(qū)域 -- >< /TD > < /TR > < /TABLE > 正如盡可能早地關(guān)閉TABLE標(biāo)記使得瀏覽器能夠快速地顯示出表格中的數(shù)據(jù),還有另外兩個(gè)標(biāo)記也同樣可以用這種方法提高顯示速度,這兩個(gè)標(biāo)記就是用于制作列表框的< OPTION >標(biāo)記和用于制作無序列表的< LI >標(biāo)記。   ASP程序員常常要訪問數(shù)據(jù)庫獲取數(shù)據(jù)然后用< OPTION >標(biāo)記構(gòu)造列表框。只要簡單地改動一下代碼關(guān)閉< OPTION >標(biāo)記,就可以讓瀏覽器顯示頁面的速度加快。   例如,原先使用下面的代碼: Do while not objRS.EOF strOptionList = strOptionList & "< OPTION VALUE=""" & objRS("ID") & _""" >" & objRS("ProductName") objRS.MoveNext Loop Response.Write "< SELECT SIZE=""1"" >" & strOptionList & "< /SELECT >"   現(xiàn)在只需改動一行代碼: Do while not objRS.EOF strOptionList = strOptionList & "< OPTION VALUE=""" & objRS("ID") & _""" >" & objRS("ProductName") &"< /OPTION>" objRS.MoveNext Loop Response.Write "< SELECT SIZE=""1"" >" & strOptionList & ""   如果原來使用的代碼如下: < UL > < LI >蘋果 < LI >桔子 < LI >香蕉 < /UL >   那么現(xiàn)在改用: < UL > < LI >蘋果< /LI > < LI >桔子< /LI > < LI >香蕉< /LI > < /UL >   經(jīng)過這些改動之后,瀏覽器顯示頁面的速度將會更快。

以上部分內(nèi)容(文字、圖片)收集于互聯(lián)網(wǎng),版權(quán)歸原作者所有。感謝每一位辛勤著寫的作者,感謝每一位的分享。免責(zé)聲明:如有侵犯您的原創(chuàng)版權(quán)請告知,我們將盡快刪除相關(guān)內(nèi)容,感謝您的理解與支持。
上一篇:用CSS制作親和力的表格[福建網(wǎng)站建設(shè)] 下一篇:HTML文件中也玩include文件包含

服務(wù)項(xiàng)目查看更多

免責(zé)聲明

非常感謝您訪問我們的網(wǎng)站,并請您仔細(xì)閱讀本聲明的所有條款:

1、本站部分內(nèi)容來源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動。

2、本站不承擔(dān)用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。

3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī),當(dāng)本聲明與國家法律法規(guī)沖突時(shí),以國家法律法規(guī)為準(zhǔn)。

4、如果侵害了您的合法權(quán)益,請您及時(shí)與我們聯(lián)系,我們會在第一時(shí)間刪除相關(guān)內(nèi)容!

聯(lián)系方式:023-65309616
電子郵件:543874515@qq.com

ENABLE YOUR BRAND
TO BURST INTO EXCELLENCE
中高端定制開發(fā)服務(wù)商
掃一掃,微信咨詢
130-7236-3699 543874515