淺談在響應式設計中優化CSS提高前端性能

作者簡介：張曉穎，女，1982年6月20，漢族，重慶市忠縣，本科，職稱：講師，中級，主要研究方向：網頁設計與制作，平面設計，網頁前端方向。

摘要：隨著互聯網產業和各種手持移動終端的高速發展，響應式網頁設計已經成為必然趨勢。在手持移動設備中，系統資源分配給瀏覽器的資源是有限的。我們在進行響應式設計時不僅要考慮頁面美觀性，各種功能性，還需要從用戶體驗感的角度，考慮網頁顯示時設備性能的問題。本文將從前端設計角度，分析如何CSS表現層方面提高前端性能。

關鍵詞：前端性能 響應式設計 CSS

中圖分類號：TP39 文獻標識碼：A 文章編號：1672-3791（2015）03（c）-0000-00

如今，手持移動設備正以空前的速度發展，但與pc比較在性能上還有一定的差距。瀏覽器能夠實現的特性越來越多，相對于前端消耗，后端消耗只占整個流程的10%-20%，網頁訪問、用戶交互、網頁解析、渲染、布局繪制都會消耗內存。而在手持移動設備中，系統資源分配給瀏覽器的資源是有限的。這就要求在對網頁進行響應式設計時，除了考慮各設備分辨率的兼容問題，還必須考慮到設備性能問題，從而提高用戶體驗感，提升網站整體性能。本文僅就如何利用css對前端性能的優化進行歸納總結。

CSS是網頁的表現層，新的標準規范CSS3的充分利用可以使web應用更加優美，但是使用不當則會加劇內存的損耗，從而有損于網頁的呈現。我們可以從以下幾個方面去進行優化：

1、將CSS寫在網頁頭部。CSS文件放到文檔頭部（及外部調用文件）會讓網頁加載更快，因為它們是可以被緩存的。引用外部樣式也可以讓頁面逐漸加載。 如果把樣式表放到文件里面或者文件尾部它會阻止頁面元素的逐漸顯示，并且還會導致頁面內容以沒有樣式的形式顯示出來，待完全加載樣式后，頁面重繪，影響用戶體驗。

2、盡量避免在HTML標簽中寫Style屬性。CSS （Cascading Style Sheets） 通常存儲在樣式表中，使用外部樣式表是為了解決內容與表現分離的問題，從而極大提高工作效率，減少代碼冗余。

3、避免CSS表達式。CSS Expression （CSS 表達式），是一種使用動態設置 CSS 屬性的方式。其實 CSS 表達式非常強大，我們可以使用 它實現 min-width 屬性以及隔行換色，模擬偽類等等；在你改變窗口大小，滾動頁面甚至移動鼠標都會觸發表達式進行求值，如此頻繁的求值以至于瀏覽器的性能產生嚴重的影響。所以為了網頁速度和瀏覽器負擔，盡可能避免css表達式。

4、移除空的CSS規則。空的css規則指的是該規則不包含任何屬性，如：.clear{}。空的CSS規則增加了CSS文件的大小，而且會影響CSS樹的執行，所以需清除空的CSS規則。

5、正確使用Display的屬性。CSS display屬性基本上有inline，block，和none三個屬性值。inline將他所定義的元素顯示為行元素。如strong，input，span默認元素為行元素。block元素是塊級元素，會使前后元素產生換行效果。hn和p元素默認情況為塊級元素。none，意思是不顯示元素。

除了以上的Display基本屬性，騰訊總結了以下的一些合理使用的規則。

a） display：inline后不應該再使用width、height、margin、padding以及float

b） display：inline-block后不應該再使用float

c） display：block后不應該再使用vertical-align

d） display：table-*后不應該再使用margin或者float

6、不濫用Float。Float浮動在實際應用種是非常廣泛，但由于Float在渲染的時候計算量比較大，對終端瀏覽器增加不必要的負擔，所以在一些不應該使用float的地方盡量減少使用。如：無序鏈接替代無序列表。當可以使用a標簽進行排列時，就不要使用無序列表。A標簽是行元素，他會自動的橫向排列。Li為塊級元素，要想橫向顯示，必須配合float。也可以設定li標簽display：inline，將塊級變為行級達到頁面所要的效果。這樣會使代碼更簡潔。

7、不濫用Web字體。在Web編碼中，CSS默認應用的Web字體是有限的，雖然在新版本的CSS3，我們可以通過新增的@font-face屬性來引入特殊的瀏覽器加載字體，但瀏覽器遇到本機沒有的字體時會進行網絡下載，解析，重繪當前頁面。所以多數情況下，考慮各個因素的影響我們還是應該盡量充分利用這些系統默認web安全字體實現CSS的編寫。

8、不聲明過多的Font-size。元素的font-size屬性會自動繼承它父級元素的font-size屬性值，除非你重新定義覆蓋它。一般來說，大多數情況下使用em或者%，這樣在響應式顯示時字體就能被更精細比例的字號支持。本人建議使用百分比或em來定義font-size大小，在兼容瀏覽器時也會得到很好的支持。所以盡量合理的定義字體大小，以便于在頁面放縮的時候仍然保持良好的可讀性，提高css效率。

9、值為0時不需要任何單位。0 是最好的兼容策略，0 以不變應萬變。為了瀏覽器的兼容性和性能，值為0時不要帶單位。

10、標準化各種瀏覽器前綴。瀏覽器前綴為-webkit（Chrome/Safari），-moz（Firefox），-ms（IE），-o（Opera，現在該瀏覽器改用blink內核，已經淘汰）。在CSS屬性尚未完全成為W3C標準，我們會使用瀏覽器前綴。在使用時，應該先將所有私有的CSS3屬性寫在前面，最后再寫標準的CSS3屬性。使用css動畫時，只使用-webkit和無前綴兩種即可。我們期待所有css屬性都成為標準，并且被Firefox、Chrome等所有瀏覽器的最新版兼容，那時就沒有必要使用瀏覽器前綴了。

11、避免讓選擇符看起來像正則表達式。高級選擇器，是區別于常見選擇器的概念，是CSS的高級運用，也是作為擴展。在使用的時候，注意有些選擇器會優先于其他選擇器，有時后面的選擇器也會覆蓋前面的樣式。雖然使用高級選擇器可以大幅度的提高開發書寫或修改樣式表時的工作效率。但在響應式布局時，考慮到更多終端的性能應盡可能的避免看起來比較復雜的高級選擇器，因為高級選擇器執行耗時長且不易讀懂，避免使用。

綜上，在我們進行響應式設計時，由于要適應不同終端，需要加載的css文件比較大，流量成本也比較高，終端反應速度較慢，客戶端加載時間過長。所以進行前端性能優化有相當的必要。本文僅從優化css的方面提了一些拙見，在前端性能優化方面還有很長的路要走，作為前端設計工程師我們只有不斷的去挖崛研究，才能趕上科技前進的步伐。

參考文獻：

1、《Web前端性能優化的研究與應用》 張紫薇 電子科技大學2011年 03期

2、《Web前端性能優化方案與實踐》 王成 等 計算機應用與軟件 2014年12月

3、《響應式設計對網頁界面的影響》 戴慧萍 藝術教育 2015年01月