靜態優化Web系統頁面

曹海英　元元

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

【關鍵詞】Web系統 靜態頁面 優化 切圖

1 引言

隨著互聯網的發展，通過網絡從各種Web系統上獲取、瀏覽、操作信息的人越來越多，基于網絡的信息管理系統已經在人們生產生活的各個領域得到廣泛應用。Web系統中信息是以網頁的形式呈現給用戶的，在類似首頁等的匯總展示動態顯示內容頁面中，不可避免的會調用大量的數據庫操作語句，獲取信息來填充頁面框架。在讀取存儲在數據庫或者其它存儲媒介中內容的時候，由于其操作語句的復雜性、頻繁性會造成服務器端處理數據的壓力，影響到系統性能以及用戶體驗。針對該類頁而，可以將其做靜態化處理。

2 頁面靜態化

靜態化處理，在不改變頁面原本內容的情況下作為HTML靜態頁面存儲，可以省去頻繁連接數據庫等一系列動態操作的過程，從而使整個頁面的渲染變得更加迅速。頁面靜態化，可以優化系統性能，減少服務器負擔。讀取靜態頁面流程如圖1。

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

3 切圖技術

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

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

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

3.1 切圖的原則與技巧

合理的切圖是非常重要的，因為切圖的方法正確與否決定了后續設計網頁時CSS書寫的簡易程度以及網頁頁面載入的速度。在切圖的時候應該遵循一定的原則，即在進行切片的時候，首先將網頁按照內容區域在水平方向切割，沿著頁面水平方面盡量平行的從左到右，切成大的切片。例如：導航區、版權區等都切成大的切片。每個大的切片內部再細化切片，在切片的時候要從左到右，內容差異的區域切割開，固定的區域與變化的區域切割開，需要建立鏈接、設置特效的區域要切割開。

切圖的總的技巧是減少切片的個數和大小。個數和大小減少，存儲在服務器上的圖片的信息量也就減少了，也就是說在網頁服務器上占的空間減少，則從服務器下載圖片到客戶端需要的時間也就會縮短。

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

3.2 使用切片工具對網頁效果圖切片

以“河套學院學生事務管理系統”網頁（如圖2）為例，通過Photoshop軟件中的切片工具對設計好的網頁效果圖進行切片。在切圖的時候，根據網頁效果圖的實際情況按照切圖的原則和技巧，規劃確定如何切片。

（1）Ctrl+R調出標尺，設置參考線。從不同參考線之間交叉的區域中確定要切割的切片圖像。

（2）選擇切片工具，對網頁效果圖進行切片。切片的過程要先總體后局部；多個內容重疊在一起時，隱藏圖層分別切片；切片的區域盡量整齊規范，切片之間不要重疊，保證所有的切片總和與被切片的圖像尺寸一致。

（3）將分割好的圖片保存。選擇“文件”|“存儲為 Web 所用格式”。根據每個切片特點優化，選擇保存的圖像格式。指定路徑，會自動生成文件夾保存圖片，默認命名為“Image”，可以重新命名。

在保證網頁頁面效果相同的情況下，原效果圖總容量較大；直接切片后容量稍減小；而優化減少切片個數和大小后，總容量為原來的三分之一，圖片的存儲容量明顯減少，加快了學生教師在各種終端瀏覽網頁的速度。

3.3 布局網頁

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