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

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

關(guān)鍵詞：前端性能 響應(yīng)式設(shè)計 CSS

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

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

CSS是網(wǎng)頁的表現(xiàn)層，新的標(biāo)準(zhǔn)規(guī)范CSS3的充分利用可以使web應(yīng)用更加優(yōu)美，但是使用不當(dāng)則會加劇內(nèi)存的損耗，從而有損于網(wǎng)頁的呈現(xiàn)。我們可以從以下幾個方面去進行優(yōu)化：

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

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

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

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

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

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

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

b） display：inline-block后不應(yīng)該再使用float

c） display：block后不應(yīng)該再使用vertical-align

d） display：table-*后不應(yīng)該再使用margin或者float

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

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

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

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

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

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

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

參考文獻：

1、《Web前端性能優(yōu)化的研究與應(yīng)用》 張紫薇 電子科技大學(xué)2011年 03期

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

3、《響應(yīng)式設(shè)計對網(wǎng)頁界面的影響》 戴慧萍 藝術(shù)教育 2015年01月