我們都知道性能對於一個網站來說相當重要，以至於很多公司都會專門招聘人員優化網站性能，網上關於探討網站性能優化的文章也非常多。性能是什麼呢？簡單來說，就是用戶打開網站到網頁完全呈現在用戶面前所耗費的時間，研究表明：用戶最滿意的打開網頁時間是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選擇器，增強樣式的複用；
中還有兩個重要的知識點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中使用運算式：學習CSS的時候就知道，這個應該避免，不應該加深到這一層再去了解，因爲這個的後果確實非常嚴重，一旦存在動畫性的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優化的東西，當然也汲取了前輩們的智慧，算是總結一下吧，我相信關於css的優化知識還有很多，不斷學習吧！！