初探DIV+CSS在網頁優化中的應用

閆娜

摘 要：隨著網絡的不斷發展，網頁在網絡中占據了半壁江山，網頁能夠及時的響應請求做出回應是每一個網頁設計者所要努力實現的，但是前端包含的資源越來越多，例如要有html、image、flash還有CSS等等，面對這樣龐大的資源，如何更好地優化網頁，不僅僅是給客戶端的用戶一個好的體驗，也可以從服務器端節約資源。而優化網頁涉及到很多方面，而今天主要從DIV+CSS方面探討網頁優化。

關鍵詞：網頁 優化 DIV CSS

中圖分類號：G71 文獻標識碼：A 文章編號：1672-3791（2017）02（b）-0038-02

1 table與DIV+CSS比較

傳統的網頁一般都使用table對網頁進行布局，相對于DIV標簽，用table布局簡單容易上手，數據內容的呈現更加穩定可靠。在使用table對網頁布局時往往采用多重表格嵌套的方式，由于網頁文件中使用table標簽會使網頁瀏覽速度變慢，又因為table中的內容是自適應的，為了這種特性，顯示網頁的時候只有當一個完整的table標簽顯示完成，它中間的內容才會顯示出來，所以有可能在開始瀏覽網頁時會出現空白過一段時間內容才顯示的情況。另外在使用table布局的時候往往把相關的屬性都設計在標簽中，在設計就無形中造成了代碼的冗余，而且對后期網頁的維護帶來極大的不利。而DIV+CSS樣式相對與table標簽能夠很好的解決以上table來帶的弊端，是不是DIV+CSS樣式完全能夠解決以上問題呢也不盡然，所以該文將從代碼的角度探討關于DIV+CSS網頁優化的問題。

2 DIV+CSS布局的優勢

（1）結構和樣式分離便于網頁的維護。

DIV+CSS布局的最大優勢在于，結構和樣式的分離，這為后期頁面的維護提供了極大的方便。如果要修改網頁的板式只需要打開樣式文件進行修改即可，由于樣式文件在整個站點中是通用的，所以只需修改樣式文件就可以起到事半功倍的效果，大大節約了人力物力。

（2）網頁的體積小節約資源，打開速度塊。

由于網頁中的樣式寫在了CSS文件中，大大降低了網頁的體積容量，相對與table布局中只有最外層的表格完全加載才能顯示內部內容，DIV+CSS的布局方式將網頁劃分成很多個區域，采用逐層加載，大大提高了加載的速度，網頁打開的速度也就更快。除此之外，由于網頁文件的體積較小，瀏覽較快，可以大大節約流量，一次也可以節約一筆成本。

（3）友好的搜索引擎。

在搜索的時候就凸顯了關鍵詞的重要性，使用DIV+CSS布局之后，大部分的樣式代碼被寫在了CSS文件中，網頁中的主題部分就突出了出來，這樣更便于搜索引擎的采集，從而增加了網站被檢索出來的速度。

（4）保持頁面整體風格一致。

把樣式單獨寫到一個CSS文件中，增加了樣式代碼的可重用性，也便于CSS文件中設置好的樣式應用于其他文件，從而保證了整個站點風格的統一。

3 如何對DIV+CSS進行優化

（1）寫正確CSS的位置。

CSS代碼作為樣式代碼通用性極強，CSS有的是放在當前頁中有的是作為獨立的文件，所以為了起到優化的效果，CSS代碼要放在一個單獨的文件中，這樣既便于維護與，也便于其他文件的應用。即使CSS代碼一定要放在當前文檔中，也不要放在body標簽中，防止樣式還加載，網頁就已經顯示。

（2）簡寫CSS屬性代碼。

我們使用CSS樣式時的代碼往往是軟件自動生成，這些生成的代碼雖然調理清晰，但是也造成了文件體積的增加，也犧牲了文件的執行效率，簡寫CSS的屬性代碼就可以有效的減少CSS文件的大小，如何來簡寫這些代碼呢，例如我們要設置一個id為menu的DIV標簽背景顏色為黃色，我們知道顏色值是以6位16進制的數表示的，如果用Dreamweaver自動生成就會顯示如下：

#menu { background-color： #FFCC99；}

我們會看到從左到右緊挨著的兩個顏色值是相同的，從代碼優化上我們就可把上面的代碼寫成右面的樣子。#menu { background-color： #FC9；}

如果進一步設置menu的方框樣式設置，填充左右10 px，上下為0 px，邊界左右為5 px，上下為2 px，dreamweaver中自動生成的代碼為：

如果填充和邊界上下左右有設置不同的值，例如padding的格式如下：

Padding： top的值、right的值、bottom的值、left的值。

Margin的格式和padding相同。當bottom和left的值缺失時默認和對應的top和right的值相同。

如果再接著設置menu的邊框樣式，如果四個邊框的樣式不完全相同就寫成下面的形式：

border-top：1px solid #cccccc； border-left：1px solid #cccccc；

border-right：1px solid #cccccc；border-bottom：4px solid #cccccc；

如果四個邊框的樣式完全一樣代碼就可以進一步優化為下面的樣子：

border： 1px solid #cccccc；

除了上面說的顏色值，方框的設置，邊框的設置之外，例如背景、字體列表等的CSS樣式也可以根據具體的設計要求進行優化。

（3）重新排列CSS代碼。

為了節約文件中空格和換行的出現次數，節約文件所占據的存儲空間，如上面的menu的CSS代碼，通過簡寫代碼我們優化過后的代碼如下：

#menu { background-color： #FFFF00；

padding： 0px 10px；

margin： 2px 5px；

border： 1px solid #cccccc； }

那么我們通過重新排列代碼起到了代碼的進一步優化，上面的代碼就可以寫成下面的形式：

#menu {background-color： #FFFF00； padding： 0px 10px； margin： 2px 5px； border： 1px solid #cccccc；}

（4）提取重復的樣式。

在設計頁面的過程中，如果有兩個或者兩個以上的CSS樣式基本一樣，而只有極少數的部分不同，我們就可以把公用的代碼單獨提取出來，做成一個單獨的樣式，例如在設計left和right的CSS時候如下：

#left{ border：1px solid #03F； padding：10px； width：250px； float： left；}

#right{ border：1px solid #03F； padding：10px； width：500px； float： right；}

通過上面的代碼我們會看到這兩個樣式中除了寬度和浮動樣式不一樣其他的都一樣那么我們就可以把重復的代碼提取出來，提取出來之后的樣式如下：

.Gongong{ border：1px solid #03F； padding：10px； }

#left{width：250px； float： left；}

#right{width：500px； float： right；}

在正文中的應用如下：

另外，同一部分的代碼盡量放在一塊，這樣歸類整理之后代碼才更具有調理性，沒一部分的寫完之后最好有分隔標志，以便以后再次使用。

參考文獻

[1] 李敏.淺談網頁布局技術的教學實踐[J].無線互聯科技，2016（17）：85-86.

[2] 李淑曉.基于SEO的XHTML+CSS網頁布局與美化[J].電腦知識與技術，2011，7（13）：3023-3024.

[3] 李東博.HTML5+CSS3從入門到精通[M].北京：清華大學出版社，2013.

[4] 王大遠.Div+CSS 3.0網頁布局案例精粹[M].北京：電子工業出版社，2011.