靜態(tài)優(yōu)化Web系統(tǒng)頁面

曹海英　元元

摘 要 用戶訪問一個(gè)靜態(tài)Web頁面要比訪問一個(gè)從數(shù)據(jù)庫中實(shí)時(shí)提取數(shù)據(jù)的動(dòng)態(tài)Web頁面快。如果能將動(dòng)態(tài)數(shù)據(jù)頁面靜態(tài)化，可以改善Web系統(tǒng)的整體性能。 同時(shí)為了增加網(wǎng)頁的吸引力，在制作Web網(wǎng)頁時(shí)，一般需要設(shè)計(jì)整體效果圖，然后使用切圖技術(shù)對(duì)效果圖進(jìn)行切片后再設(shè)計(jì)頁面，切圖是否合理非常重要，它決定了網(wǎng)頁頁面載入的速度。為了保證得到最佳的切圖方案，本文提出了切圖的原則和技巧。

【關(guān)鍵詞】Web系統(tǒng) 靜態(tài)頁面 優(yōu)化 切圖

1 引言

隨著互聯(lián)網(wǎng)的發(fā)展，通過網(wǎng)絡(luò)從各種Web系統(tǒng)上獲取、瀏覽、操作信息的人越來越多，基于網(wǎng)絡(luò)的信息管理系統(tǒng)已經(jīng)在人們生產(chǎn)生活的各個(gè)領(lǐng)域得到廣泛應(yīng)用。Web系統(tǒng)中信息是以網(wǎng)頁的形式呈現(xiàn)給用戶的，在類似首頁等的匯總展示動(dòng)態(tài)顯示內(nèi)容頁面中，不可避免的會(huì)調(diào)用大量的數(shù)據(jù)庫操作語句，獲取信息來填充頁面框架。在讀取存儲(chǔ)在數(shù)據(jù)庫或者其它存儲(chǔ)媒介中內(nèi)容的時(shí)候，由于其操作語句的復(fù)雜性、頻繁性會(huì)造成服務(wù)器端處理數(shù)據(jù)的壓力，影響到系統(tǒng)性能以及用戶體驗(yàn)。針對(duì)該類頁而，可以將其做靜態(tài)化處理。

2 頁面靜態(tài)化

靜態(tài)化處理，在不改變頁面原本內(nèi)容的情況下作為HTML靜態(tài)頁面存儲(chǔ)，可以省去頻繁連接數(shù)據(jù)庫等一系列動(dòng)態(tài)操作的過程，從而使整個(gè)頁面的渲染變得更加迅速。頁面靜態(tài)化，可以優(yōu)化系統(tǒng)性能，減少服務(wù)器負(fù)擔(dān)。讀取靜態(tài)頁面流程如圖1。

在用戶發(fā)送請(qǐng)求后，如果存在對(duì)頁面信息的更改操作，則刪除其對(duì)應(yīng)的靜態(tài)頁面，該過程保證了所存儲(chǔ)的HTML頁面內(nèi)始終為最新信息。如果該請(qǐng)求為讀取操作，需要判斷是否存儲(chǔ)了相應(yīng)的HTML頁面，如果有則直接讀取，沒有則對(duì)請(qǐng)求進(jìn)行編譯，生成靜態(tài)頁面。該過程保證了在頁面沒有更改信息的情況下，只動(dòng)態(tài)讀取一次信息，之后的請(qǐng)求都將直接訪問靜態(tài)頁面，從而避免了與存儲(chǔ)媒介進(jìn)行數(shù)據(jù)交互的過程，訪問速度較動(dòng)態(tài)頁面有大幅度提升，同時(shí)也降低了數(shù)據(jù)庫的訪問壓力，系統(tǒng)在性能上也有顯著改善。

3 切圖技術(shù)

一個(gè)Web系統(tǒng)的界面設(shè)計(jì)需頁面美觀，布局合理，能夠吸引瀏覽者的眼球，方便用戶使用，因此在動(dòng)手制作之前要精心設(shè)計(jì)整體效果，網(wǎng)頁的效果會(huì)影響系統(tǒng)用戶人數(shù)。設(shè)計(jì)好網(wǎng)頁的整體效果圖后，如果把整張效果圖直接插入到頁面內(nèi)，在用戶瀏覽網(wǎng)頁時(shí)，瀏覽器與網(wǎng)頁服務(wù)器之間產(chǎn)生一個(gè)request連接，下載量大，連接時(shí)間長，用戶打開網(wǎng)頁的速度就會(huì)變慢，這樣會(huì)影響Web應(yīng)用系統(tǒng)的性能。由于Web的網(wǎng)絡(luò)特征，需要盡可能減少頁面加載量，我們可以使用切圖技術(shù)優(yōu)化網(wǎng)頁圖形或整個(gè)頁面布局效果圖，降低圖片文件的大小和數(shù)量，加快加載速度，方便用戶體驗(yàn)。

切圖技術(shù)就是指在網(wǎng)頁制作過程中，通過圖形圖像處理軟件提供的切片工具，將設(shè)計(jì)好的頁面效果圖或者頁面中放置的大幅圖像，分割成為一系列小的圖像，這些小圖像稱為原大幅圖像的切片。然后在網(wǎng)頁中重新將這些小的切片圖像沒有縫隙的拼接起來，生成頁面效果。

切圖的優(yōu)點(diǎn)：（1）減少下載時(shí)間。大圖經(jīng)過切圖分割成多幅小圖，當(dāng)瀏覽器下載這幅大圖的效果時(shí)，就變成了下載多幅小圖，瀏覽器與服務(wù)器之間就產(chǎn)生多個(gè)request，下載的速度就快了。（2） 優(yōu)化圖像。完整的圖像只能使用一種文件格式，應(yīng)用一種優(yōu)化方式。切片之后還可以對(duì)每個(gè)切片進(jìn)一步優(yōu)化，根據(jù)切片圖像特點(diǎn)，可以存儲(chǔ)成不同的圖形文件格式。例如：顏色少，或者動(dòng)態(tài)效果的切片可指定文件類型為Gif，顏色復(fù)雜的切片指定為Jpeg，圖像有透明度變化切片指定為Png。在保證圖像質(zhì)量的基礎(chǔ)上，可以減少存儲(chǔ)空間，優(yōu)化圖片，使圖片變小，下載速度加快。（3）靈活伸縮圖像。切片后，當(dāng)頁面大小發(fā)生變化時(shí)，頁面的各部分可以相對(duì)靈活自由的伸縮，不會(huì)出現(xiàn)使頁面發(fā)生錯(cuò)亂或變形等問題。（4） 設(shè)計(jì)制作動(dòng)態(tài)效果。利用切片可以制作出各種交互效果。例如制作按鈕不同狀態(tài)效果，翻轉(zhuǎn)圖形等。（5）創(chuàng)建鏈接。切片后，部分區(qū)域如需建立超鏈接，不需要在大的圖片上再創(chuàng)建熱區(qū)，可以根據(jù)需要對(duì)不同的切片添加不同的鏈接地址。

3.1 切圖的原則與技巧

合理的切圖是非常重要的，因?yàn)榍袌D的方法正確與否決定了后續(xù)設(shè)計(jì)網(wǎng)頁時(shí)CSS書寫的簡易程度以及網(wǎng)頁頁面載入的速度。在切圖的時(shí)候應(yīng)該遵循一定的原則，即在進(jìn)行切片的時(shí)候，首先將網(wǎng)頁按照內(nèi)容區(qū)域在水平方向切割，沿著頁面水平方面盡量平行的從左到右，切成大的切片。例如：導(dǎo)航區(qū)、版權(quán)區(qū)等都切成大的切片。每個(gè)大的切片內(nèi)部再細(xì)化切片，在切片的時(shí)候要從左到右，內(nèi)容差異的區(qū)域切割開，固定的區(qū)域與變化的區(qū)域切割開，需要建立鏈接、設(shè)置特效的區(qū)域要切割開。

切圖的總的技巧是減少切片的個(gè)數(shù)和大小。個(gè)數(shù)和大小減少，存儲(chǔ)在服務(wù)器上的圖片的信息量也就減少了，也就是說在網(wǎng)頁服務(wù)器上占的空間減少，則從服務(wù)器下載圖片到客戶端需要的時(shí)間也就會(huì)縮短。

在切圖時(shí)遇到純色的區(qū)域，并且上面的文字沒有設(shè)置特效，則可以不進(jìn)行切片，在HTML里直接實(shí)現(xiàn)。區(qū)域上的圖形顏色和形狀都沒有變化的相同的區(qū)域，切一個(gè)切片即可，不需要重復(fù)切片。遇到有漸變背景，可以沿著與漸變色相同方向切一個(gè)像素的切片，用CSS中Background的repeat_x或repeat_y來自動(dòng)填充。遇到有紋理的背景或有紋理的圖形時(shí)，切片的技巧為：找到紋理的規(guī)律，圖形的規(guī)律，調(diào)整找到最小的一個(gè)或者多個(gè)切片，進(jìn)行切割，用最小的切片去平鋪實(shí)現(xiàn)效果，同時(shí)必須確保紋理背景或者紋理圖形各個(gè)切片無縫拼接。

3.2 使用切片工具對(duì)網(wǎng)頁效果圖切片

以“河套學(xué)院學(xué)生事務(wù)管理系統(tǒng)”網(wǎng)頁（如圖2）為例，通過Photoshop軟件中的切片工具對(duì)設(shè)計(jì)好的網(wǎng)頁效果圖進(jìn)行切片。在切圖的時(shí)候，根據(jù)網(wǎng)頁效果圖的實(shí)際情況按照切圖的原則和技巧，規(guī)劃確定如何切片。

（1）Ctrl+R調(diào)出標(biāo)尺，設(shè)置參考線。從不同參考線之間交叉的區(qū)域中確定要切割的切片圖像。

（2）選擇切片工具，對(duì)網(wǎng)頁效果圖進(jìn)行切片。切片的過程要先總體后局部；多個(gè)內(nèi)容重疊在一起時(shí)，隱藏圖層分別切片；切片的區(qū)域盡量整齊規(guī)范，切片之間不要重疊，保證所有的切片總和與被切片的圖像尺寸一致。

（3）將分割好的圖片保存。選擇“文件”|“存儲(chǔ)為 Web 所用格式”。根據(jù)每個(gè)切片特點(diǎn)優(yōu)化，選擇保存的圖像格式。指定路徑，會(huì)自動(dòng)生成文件夾保存圖片，默認(rèn)命名為“Image”，可以重新命名。

在保證網(wǎng)頁頁面效果相同的情況下，原效果圖總?cè)萘枯^大；直接切片后容量稍減小；而優(yōu)化減少切片個(gè)數(shù)和大小后，總?cè)萘繛樵瓉淼娜种唬瑘D片的存儲(chǔ)容量明顯減少，加快了學(xué)生教師在各種終端瀏覽網(wǎng)頁的速度。

3.3 布局網(wǎng)頁

可以使用DIV+CSS利用HTML代碼布局網(wǎng)頁，按照頁面布局，比如上中下三大板塊，將頁面整體進(jìn)行