加載性能優化
性能優化中有一個重要的指標——首次有效繪製（First Meaningful Paint，簡稱FMP）即指頁面的首要內容（primary content）出現在屏幕上的時間。這一指標影響用戶看到頁面前所需等待的時間，而內聯首屏關鍵CSS（即Critical CSS，可以稱之為首屏關鍵CSS）能減少這一時間
減少文件體積，壓縮代碼使用代碼壓縮工具壓縮代碼，去掉多餘空格和換行等多餘部分
CSS異步加載
將馬上要用到的文件，放在頁面頭部加載。其他模塊的CSS可以使用loadCSS 和 Preload待頁面渲染完後異步加載
減少阻塞加載，不要用 @import
@import會影響CSS的加載速度
dns-prefetch預解析
在頁面中添加dns-prefetch屬性，告訴瀏覽器對指定域名預解析，進行預解析之後，用戶在訪問相應域名就不會再有延遲了，從而加快加載速度
動畫優化
硬件加速通過GPU進行渲染從而使動畫變得更加順滑流程
注意事項：
- 慎用硬件加速，雖然它帶來的提升是顯而易見的，但是其對內存的影響也是巨大的
- GPU渲染會影響字體的抗鋸齒效果，文本會變得模糊
優先使用transtion做動畫效果
優先選擇transform，儘量不要使用height，width，margin和padding，因為相較於其它屬性transtion可以直接減少主線程的計算量
圖片優化
圖片壓縮圖片懶加載由於一個頁面同時向後臺發送的請求是有數量限制的(一般瀏覽器是4到8個，IE67是2個)，所以如果頁面上有很多資源需要請求，就會導致頁面加載時間變得很長。懶加載就能有效緩解此問題，優先加載當前頁面的圖片資源，在通過頁面滑動的位置實時監聽並根據頁面滑動的位置請求響應資源
圖片預加載
頁面加載的時候，先加載一部分內容（一般是先加載首屏內容），其它內容等到先加載的一部分內容（一般是首屏內容）加載完了，再進行加載
重排與重繪
避免重繪元素的外觀發生改變時，會觸發頁面重繪。在網站的使用過程中，重繪是無法避免的。不過，瀏覽器對此做了優化，它會將多次的重排、重繪操作合併為一次執行。雖然瀏覽器有做了相應的優化，但是我們讓然應該儘量避免重繪，可以可以使頁面更加流暢
減少使用某些屬性
在瀏覽器繪製屏幕時，所有需要瀏覽器進行操作或計算的屬性相對而言都需要花費更大的代價。當頁面發生重繪時，它們會降低瀏覽器的渲染性能。所以在編寫CSS時，如果有可以替代的方案我們應當儘量減少使用box-shadow/border-radius/filter/透明度/:nth-child等屬性，這樣當瀏覽器繪製或者重繪時，瀏覽器會有更好的渲染效果
減少重排
重排會導致瀏覽器重新計算整個文檔，重新構建渲染樹，這一過程會降低瀏覽器的渲染速度。如下所示，有很多操作會觸發重排，我們應該避免頻繁觸發這些操作
觸發重排的屬性：
width、height、padding、margin、display、border-width、position
top、left、right、bottom、font-size、float、text-align
overflow-y、font-weight、overflow、font-family
line-height、vertical-align、clear、white-space、min-height
代碼格式優化
縮寫CSS許多CSS屬性都有縮寫的方法
例如background: #00FF00 url(bgimage.gif) no-repeat fixed top
在這個背景屬性的設置中我們將背景顏色、背景圖、位置等相關信息在一個屬性中進行設置，用較少的代碼完成了一系列相關樣式屬性，極大的縮小了代碼的格式大小
慎用特殊CSS樣式將styleSheets放在頁面的頂部去除多餘無用的CSS重複的樣式可以統一設置，避免重複設置
重複的CSS屬性，可以統一設置在引用
正確使用display的屬性
display: inline後不應該再使用 width、height、margin、padding 以及 float；
display: inline-block 後不應該再使用 float；
display: block 後不應該再使用 vertical-align；
display: table-* 後不應該再使用 margin 或者 float
慎用浮動避免使用複雜的選擇器，層級最好不超過三層通過CSS繼承屬性減少代碼量
color、font-size等等可以通過父級元素繼承給子元素的屬性就無需重複設置
選擇器的使用
- 保持簡單，不要使用嵌套過多過於複雜的選擇器。
- 通配符和屬性選擇器效率最低，需要匹配的元素最多，儘量避免使用。
- 不要使用類選擇器和ID選擇器修飾元素標籤，如h3#markdown-content，這樣多此一舉，還會降低效率。
- 保存良好可讀性與可維護性
刪除不必要的單位
在CSS中，長度單位中如果出現0是可以進行簡寫的。例如：padding:0.1px的0.1px是可以簡寫.1px的。並且當長度為0的時候單位默認是px，此時px也是可以進行簡寫的
其它優化
服務器壓縮使用工具規範CSS代碼編寫規範慎重選擇高消耗的樣式高消耗屬性在繪製前需要瀏覽器進行大量計算：box-shadows、border-radius、transparency、transforms、CSS filters（性能殺手）
https://juejin.im/entry/59d4b78e6fb9a00a496e8fd4
https://www.jianshu.com/p/b2c0f32d3dd7
http://baijiahao.baidu.com/s?id=1603253323416106525&wfr=spider&for=pc