一、前言

每一個網頁都離不開css，但是很多人又認為，css主要是用來完成頁面布局的，像一些細節或者優化，就不需要怎么考慮，實際上這種想法是不正確的

作為頁面渲染和內容展現的重要環節，css影響著用戶對整個網站的第一體驗

因此，在整個產品研發過程中，css性能優化同樣需要貫穿全程

二、實現方式

實現方式有很多種，主要有如下：

• 內聯首屏關鍵CSS
• 異步加載CSS
• 資源壓縮
• 合理使用選擇器
• 減少使用昂貴的屬性
• 不要使用@import

內聯首屏關鍵CSS

在打開一個頁面，頁面首要內容出現在屏幕的時間影響著用戶的體驗，而通過內聯css關鍵代碼能夠使瀏覽器在下載完html后就能立刻渲染

而如果外部引用css代碼，在解析html結構過程中遇到外部css文件，才會開始下載css代碼，再渲染

所以，CSS內聯使用使渲染時間提前

注意：但是較大的css代碼并不合適內聯（初始擁塞窗口、沒有緩存），而其余代碼則采取外部引用方式

異步加載CSS

在CSS文件請求、下載、解析完成之前，CSS會阻塞渲染，瀏覽器將不會渲染任何已處理的內容

前面加載內聯代碼后，后面的外部引用css則沒必要阻塞瀏覽器渲染。這時候就可以采取異步加載的方案，主要有如下：

• 使用javascript將link標簽插到head標簽最后

// 創建link標簽
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

• 設置link標簽media屬性為noexis，瀏覽器會認為當前樣式表不適用當前類型，會在不阻塞頁面渲染的情況下再進行下載。加載完成后，將media的值設為screen或all，從而讓瀏覽器開始解析CSS

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">

• 通過rel屬性將link元素標記為alternate可選樣式表，也能實現瀏覽器異步加載。同樣別忘了加載完成之后，將rel設回stylesheet

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">

資源壓縮

利用webpack、gulp/grunt、rollup等模塊化工具，將css代碼進行壓縮，使文件變小，大大降低了瀏覽器的加載時間

合理使用選擇器

css匹配的規則是從右往左開始匹配，例如#markdown .content h3匹配規則如下：

• 先找到h3標簽元素
• 然后去除祖先不是.content的元素
• 最后去除祖先不是#markdown的元素

如果嵌套的層級更多，頁面中的元素更多，那么匹配所要花費的時間代價自然更高

所以我們在編寫選擇器的時候，可以遵循以下規則：

• 不要嵌套使用過多復雜選擇器，最好不要三層以上
• 使用id選擇器就沒必要再進行嵌套
• 通配符和屬性選擇器效率最低，避免使用

減少使用昂貴的屬性

在頁面發生重繪的時候，昂貴屬性如box-shadow/border-radius/filter/透明度/:nth-child等，會降低瀏覽器的渲染性能

不要使用@import

css樣式文件有兩種引入方式，一種是link元素，另一種是@import

@import會影響瀏覽器的并行下載，使得頁面在加載時增加額外的延遲，增添了額外的往返耗時

而且多個@import可能會導致下載順序紊亂

比如一個css文件index.css包含了以下內容：@import url("reset.css")

那么瀏覽器就必須先把index.css下載、解析和執行后，才下載、解析和執行第二個文件reset.css

其他

• 減少重排操作，以及減少不必要的重繪
• 了解哪些屬性可以繼承而來，避免對這些屬性重復編寫
• cssSprite，合成所有icon圖片，用寬高加上backgroud-position的背景圖方式顯現出我們要的icon圖，減少了http請求
• 把小的icon圖片轉成base64編碼
• CSS3動畫或者過渡盡量使用transform和opacity來實現動畫，不要使用left和top屬性

三、總結

css實現性能的方式可以從選擇器嵌套、屬性特性、減少http這三面考慮，同時還要注意css代碼的加載順序