前端性能優化從css提及

       咱們都知道性能對於一個網站來講至關重要，以致於不少公司都會專門招聘人員優化網站性能，網上關於探討網站性能優化的文章也很是多。性能是什麼呢？簡單來講，就是用戶打開網站到網頁徹底呈如今用戶面前所耗費的時間，研究代表：用戶最滿意的打開網頁時間是2-5秒，若是等待超過10秒，99%的用戶會關閉這個網頁。
       影響網站的性能有多重因素，咱們就着重從前端方面來進行探討，首先咱們先了解一下網頁的解析過程。

主要過程有：1.解析HTML構建DOM樹 ；2.解析css構建CSSOM樹 ；3.根據DOM樹和CSSOM來構造 Rendering Tree（渲染樹）；4.Layout頁面位置計算佈局； 5.Paint繪製；css的加載不會阻塞DOM樹的解析，可是會阻塞DOM樹的渲染和後面js語句的執行，因此說纔有了優化css的必要性，針對這一問題，咱們能夠從如下方面進行考慮優化。

1.結合構建工具（webpack,gulp...），對css文件進行打包壓縮，抽離公共樣式，刪除多餘的樣式、空格、註釋。
2.減小樣式選擇器的層級，減小樣式匹配時間。        
3.儘可能使用class選擇器，加強樣式的複用；

       css中還有兩個重要的知識點repaint(重繪)和reflow(迴流)，repaint主要是針對某一個DOM元素進行的重繪，reflow則是迴流，針對整個頁面的重排，咱們都知道這兩個特性都會消耗網頁性能，他們的觸發場景也是不一樣的。不涉及任何DOM元素排版問題的變更爲repaint，例如元素的color/text-align/text-decoration等等屬性的變更，除上面所提到的DOM元素style修改基本爲reflow，例如元素的任何涉及長、寬、行高、邊框、display等style的修改。不少時候咱們是沒法避免引發repaint和reflow，可是咱們仍是要儘可能經過各類方法來減小引發這兩個特性,咱們能夠從如下方面進行考慮優化。

1.儘量在DOM末梢經過改變class來修改元素的style屬性：儘量的減小受影響的DOM元素。
2.避免設置多項內聯樣式：使用經常使用的class的方式進行設置樣式，以免設置樣式時訪問DOM的低效率。
3.設置動畫元素position屬性爲fixed或者absolute：因爲當前元素從DOM流中獨立出來，所以受影響的只有當前元素，元素repaint。
4.犧牲平滑度知足性能：動畫精度太強，會形成更屢次的repaint/reflow，犧牲精度，能知足性能的損耗，獲取性能和平滑度的平衡。
5.避免使用table進行佈局：table的每一個元素的大小以及內容的改動，都會致使整個table進行從新計算，形成大幅度的repaint或者reflow。改用div則能夠進行鍼對性的repaint和避免沒必要要的reflow。
6.避免在CSS中使用運算式：expression、calc、等等，可能會形成屢次repaint和reflow。
7.css放在head中,減小引發repaint和reflow;

       接下來咱們再來討論一下base64圖片與CssSprites（雪碧圖或css精靈），在網頁中咱們會用到不少圖標，若是每個圖標是單獨的一張圖片，那網頁加載的時候，就會有多個請求去請求圖片，顯而易見會影響網頁性能，因此要採起方法對網頁中圖標使用進行優化處理。
       Css Sprites（雪碧圖）：將許多的小圖片整合到一張大圖片中，利用css中的background-image屬性，background-position屬性定位某個圖片位置，來達到在大圖片中引用某個部位的小圖片的效果。優勢：減小網頁的http請求，提高網頁加載速度；合併多張小圖片，減小資源體積。缺點：前期須要處理圖片，增長工程量；不利於改動和維護。
       base64編碼：base64是網絡上最多見的用於傳輸8Bit字節代碼的編碼方式之一，要求把每三個8Bit的字節轉換爲四個6Bit的字節，Base64是網絡上最多見的用於傳輸8Bit字節代碼的編碼方式之一，通俗點來說就是將資源本來二進制形式轉成以64個字符基本單位，所組成的一串字符串。優勢：減小http請求；圖片能夠避免跨域問題。缺點：低版本IE不兼容；過多使用base64圖片會使得css過大，不利於css加載和解析；
       在網頁開發中咱們常常會在引入圖片，也會使用到上面兩種方法來優化處理網頁，他們有各自不一樣的使用場景。Css Sprites 主要針對一些不須要常常變更的小圖片，如表情，標誌等，base64主要適用於小於幾k的圖片，圖片太大的話反而得不償失。
       洋洋灑灑寫了一些關於css優化的東西，固然也汲取了前輩們的智慧，算是總結一下吧，我相信關於css的優化知識還有不少，不斷學習吧！！