《web前端最佳實踐》—高性能css

**

高性能css

** 做者新浪微博 @靈感_idea

Html和css自己的性能問題並不突出，在提升可讀性和可維護性的前提下，若是能讓代碼運行和解析的速度更快，則是錦上添花了。

1、使用高效css選擇器

簡單來講，能被瀏覽器快速解析和匹配的css選擇器，就是高效的選擇器。

首先要知道瀏覽器如何解析css

舉個例子：.nav ul.list li div{}

咱們常見的思惟是，先去找到nav這個類，再找類包含的ul，再找ul中類爲list的後代全部li中全部的div，簡而言之，就是從左到右。可事實是這樣麼？麼？麼？~

事實是相反的！意味着什麼呢？就是說它不是從第一個開始去慢慢的縮小範圍，而是從div這個「裸奔」的盒子開始，至關於遍歷，而後再找到li，以此類推，好吧不用我形容你應該知道這當中的消耗。理解這一原理很是重要，高效的選擇器意味着匹配更快，查找次數更少。因此咱們定義選擇器時，應該讓第一次匹配時的數量達到最少，而且讓總體的匹配查找次數最少。

以上這些解釋偏偏遵循了這樣一些原則

（1）避免使用通配符

（2）避免使用標籤選擇器和單個屬性選擇器做爲關鍵選擇器

（3）不要在id選擇器前加標籤名

（4）儘可能不要在選擇符定義過多層級，層級越少，同時也下降了css和dom結構的耦合程度，提升樣式的可維護性

（ps：老實說上面的這些「禁忌」你是否是都有犯過？~）

作個小結，以上所說，有兩點須要知道，第一點在開頭就已經提到，css的性能問題表現的並不突出，特別是在小項目中，因此，可維護性爲先；第二點是雖然定義id選擇器，有惟一性的優點，可是一個頁面只能定義惟一id，定義過多id會使重用性下降，維護更困難，因此不建議多用id。

2、css相關的圖片處理

如今的網頁當中，圖片所佔的比重以及它的重要性你們都知道。那麼如何處理好圖片以及如何爲圖片設置樣式，才能讓用戶打開網頁時體驗更好呢？下面給出一些意見：

（1）不給圖片設置尺寸

在我我的的從業經歷當中，有過這樣的狀況，我按照設計稿作好了頁面，交給後臺去測試，他就忽然跑過來跟我說：hi，你看，這兒出情況了，我一看，壞菜，圖片出格了，我纔想起沒有給圖片定義寬高（直接從設計稿裏切的也不須要），而後就犯錯了似的在css樣式裏定義了寬高。以致於後來我把這個做爲下次再作頁面時候的注意事項。當我看到這一條意見的時候，才更知一二。

來看解釋，第1、設計人員爲了畫面的精美，會製做一些超出需求尺寸的圖片；第2、同一張圖片可能會在頁面不一樣地方屢次使用，好比縮略圖、正常圖、大圖。問題來了，若是圖片原始尺寸和實際需求不一樣，在使用過程當中就會存在性能問題，利用樣式縮放會帶來cpu的額外計算過程，增長了圖片在瀏覽器的渲染時間，網絡傳輸過程也會佔更多帶寬，增長下載時間。所以，最佳作法是，爲須要的部分單獨作一套圖片，初始頁面加載時就能更快展現。

（2）使用css「雪碧圖「

是將零散的圖片合併成一張大圖，在利用css進行背景定位。好處是減小請求數，提升了圖片總體的加載速度。

但它也存在一些缺點：

好比，多張圖片合併成大圖，須要精確計算，仔細的調整位置，單純手工製做是一件很複雜的事情。（所幸如今有一些工具能夠幫咱們作）

另外，維護過程複雜，要儘可能讓已有的圖片保持原來的位置不變，若是是背景圖的尺寸發生變化致使原有區域沒法放置，那就只好放棄，若是非要在原有位置修改，則剩餘的圖片樣式都須要修改，是很繁瑣的過程。新加的圖片最好放在最後面。

還有就是使用不當會致使性能問題，最大的問題就是內存消耗。若是製做過程不作任何的規劃，隨意擺放，則可能會使圖片變得至關大，從而很佔內存。

下面是一些最佳實踐：

一、在項目後期應用css sprite技術

由於通常在開發過程當中，會比較頻繁的修改或者更換圖片，若是這個時候使用sprite技術，就會增長不少開發成本。

二、合理組織「雪碧」圖

若是要把全部的圖片放在一張圖上面，也會有不妥，維護方面也不會很方便。組織背景圖主要按照模塊和背景圖的風格來劃分。好比，做爲展現的縮略圖放在一塊兒，評論、點贊、上下箭頭等圖標放在一塊兒等。

三、控制「雪碧」圖的尺寸和大小

由於大尺寸的圖片會佔用大量的內存，因此要控制在合理尺寸，推薦長寬相乘不超過2500，大小在200kb內

四、合理控制背景圖單元間的距離及背景圖位置

這個原則是爲了防止在背景圖比元素大小更小的時候，區域出現別的無關背景圖

五、藉助相關工具處理sprite

3、減小css的代碼量

提升網站總體加載速度的一個重要手段，就是提升代碼文件的網絡傳輸速度。除了代碼壓縮，精簡代碼也是一種手段。

（1）定義簡潔的css規則

合併相關規則，定義簡潔的屬性值

合併規則是指好比font-family、font-size、font-weight等等，能夠合併爲font。 簡潔屬性值，好比顏色值：color，#33AAFF能夠簡化爲#3AF等。

（2）合併相同定義

網頁中總會有一些模塊有較高類似度，則可把一樣的部分共用一次定義，不一樣的部分再單獨定義。並且在css中，不少屬性是能夠繼承的，則只須要在合適的地方定義一次便可。

（3）刪除無效的定義

無效的定義，並不會影響頁面功能顯示，但會影響頁面展現的性能，增長代碼量的同時，也增長了瀏覽器解析代碼的時間。無效的定義包括無效的規則及無效的樣式屬性，通常是開發過程當中引入的，而從直觀上沒法判斷，這狀況，能夠用工具，chrome自帶的工具就能夠查找css中的無效樣式。。

其餘css高性能實踐

（1）避免使用@import

@import導入的新樣式文件會阻止頁面的並行下載，這樣增長了文件的總體加載時間。

（2）避免使用IE瀏覽器獨有樣式：圖片濾鏡和css表達式

圖片濾鏡的使用會在圖片加載時阻塞瀏覽器的加載和渲染，並會增長額外的內存開銷。 Css表達式的做用是動態設置css屬性，表達式不僅是有兼容性問題，還有性能問題，例如瀏覽器大小改動、窗口改動時，會使得瀏覽器頻繁計算，性能消耗極大。一樣的效果能夠用javascript來實現。

css3最佳實踐

查看瀏覽器支持狀況

在咱們使用css3的過程當中，問的最多的一個問題可能就是：兼容性如何？沒辦法，隨着css的發展，它能夠爲咱們以前遇到的不少很差解決的問題提供一個更好的方案，讓咱們忍不住去想能不能那樣去作。PC端有飽受詬病的IE系列，到了移動端會好不少，但有些仍是不太好。因此，查看瀏覽器支持狀況幾乎成了必備動做。 若是使用的特性僅僅是裝飾點綴性的效果，不影響大局，則不須要考慮太多兼容問題，若是是出於設計要求，必須支持全部瀏覽器，則要特別的關注一下了。 開發者能夠選擇好比：caniuse.com、css3 Click Chart、css contents and browser compatibility這些在線工具來查看兼容性。

添加必要的瀏覽器前綴

對於剛使用css不久的朋友來講，若是偶爾在某網站源碼當中看到諸如：「-webkit-、-moz-」等，可能會以爲很奇怪，這是什麼？它們是對應不一樣的瀏覽器廠商所加上的前綴。

由於瀏覽器在支持css3時，可能僅僅實現了標準定義的一個早期版本，因此，尚不支持標準寫法，給代碼添加瀏覽器前綴也是無奈之舉，會使得代碼更多，更難維護。

但也不是爲了「完美」而必定要去兼容全部的瀏覽器，通常能夠按照瀏覽器或者系統的版本的市場佔有率和目標用戶使用瀏覽器的比例，來決定加不加前綴以及加幾種前綴。並且相信隨着逐步的發展，系統、瀏覽器的不斷升級、更新，須要使用前綴的狀況會減小。

問題又來了，既然須要添加必要的前綴，說明有些時候仍是頗有必要，那不得不加的狀況下，那不是挺麻煩的？一樣的一條規則要寫三四遍，可能不少地方都要用，如何是好？別急，下面是幾個對策：

一、使用工具來添加css屬性的瀏覽器前綴

Prefixr，能夠在開發的後期對代碼進行處理。它會自動的添加須要的前綴和刪去沒必要要的前綴。

Autoprefixer，若是想要在開發過程當中更多的自主性，可使用這個工具，開發者能夠自定義瀏覽器支持範圍，它也有多種使用方式，能夠集成到多個開發環境中。 此外還有幾種工具可供使用：cssFx、css Agent和-prefix-free。

二、藉助css預處理技術

目前流行的有sass、less，具體方法是，針對css3樣式特性定義一份模板樣式。 優勢是：避免大量重複代碼，只須要維護一份定義。

三、不要過分添加瀏覽器前綴

有些開發者爲了兼容全部瀏覽器，無論什麼狀況都爲css代碼加上了全部瀏覽器的前綴，這是一種消極的編碼方式，增長了太多的重複代碼，下降了瀏覽器的解析性能，增長了複雜度，同時某些前綴的屬性可能沒有被瀏覽器支持過。

四、添加css3標準屬性定義

何爲標準屬性定義呢？就是不須要任何瀏覽器前綴，你們可能都會注意到，不少使用css3的地方都會在最後的地方寫標準屬性定義，爲何呢？由於當瀏覽器支持標準屬性時，它能夠覆蓋前面添加了前綴的定義，css3中的屬性標準定義纔是符合規範的定義，添加了瀏覽器前綴的定義會隨着瀏覽器的更新逐漸被淘汰。

固然，還有一點須要注意的是，某些屬性，目前是屬於Only webkit或者Only firefox的，那麼就沒有必要再寫上標準定義及其餘瀏覽器前綴了。

作好css3中新特性的兼容處理

說到兼容，就會提到低版本IE，好比很常見的圓角、透明圖片等，有時候咱們會給它們降級的處理，好比filter或者javascript，使用box-sizing、transform，推薦使用Modernizr,這個框架中包含了不少css3新特性的兼容方案。

不管是哪一種方案，都會帶來性能上的損耗，不能毫無章法的濫用，仍然是須要你們去權衡和選擇。推薦一個如何更有效率的使用HTML5的建議網站：html5please。網站按照使用的方式把css3中的新特性分紅了三類：

（1）直接使用

包含了大部分新特性，有些特性自己不會影響兼容性，如border-radius、media queries等，有些須要添加降級處理，如多背景圖，要設置一個單背景圖或者背景色做爲備選。

（2）謹慎使用

這部分主要是性能問題，例如框陰影應用於佔用很大區域的元素，頁面滾動或鼠標懸停時，會引發不小性能問題。

（3）避免使用

這部分由於它們可能僅支持某個瀏覽器，好比倒影，則須要避免使用。

綜上所述，css可以用來提升性能的方法仍是蠻多的，但咱們很容易忽略它們，由於它們所帶來的影響彷佛沒有那麼明顯，並且，不少人可能爲了圖方便，任意揮灑着本身的才華，想怎麼寫就怎麼寫，能達到效果就行，這也有點小消極哈，忘了你的優秀工程師目標了麻？！~~css規則雖不不難，真正寫好也不易，仍是要有些追求極致的精神滴。諸君且寫且珍惜吧！~

做者新浪微博 @靈感_idea