這篇文章主要介紹了CSS性能優(yōu)化的一些小技巧，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

目前創(chuàng)新互聯(lián)建站已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站運營、企業(yè)網(wǎng)站設(shè)計、隆回網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

什么是css

css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言，主要是用來設(shè)計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進行格式化。

實踐型的4個優(yōu)化技巧，先從首屏關(guān)鍵CSS開始。

1. 內(nèi)聯(lián)首屏關(guān)鍵CSS（Critical CSS）

性能優(yōu)化中有一個重要的指標(biāo)——首次有效繪制（First Meaningful Paint，簡稱FMP）即指頁面的首要內(nèi)容（primary content）出現(xiàn)在屏幕上的時間。這一指標(biāo)影響用戶看到頁面前所需等待的時間，而**內(nèi)聯(lián)首屏關(guān)鍵CSS（即Critical CSS，可以稱之為首屏關(guān)鍵CSS）**能減少這一時間。

大家應(yīng)該都習(xí)慣于通過link標(biāo)簽引用外部CSS文件。但需要知道的是，將CSS直接內(nèi)聯(lián)到HTML文檔中能使CSS更快速地下載。而使用外部CSS文件時，需要在HTML文檔下載完成后才知道所要引用的CSS文件，然后才下載它們。所以說，內(nèi)聯(lián)CSS能夠使瀏覽器開始頁面渲染的時間提前，因為在HTML下載完成之后就能渲染了。

既然內(nèi)聯(lián)CSS能夠使頁面渲染的開始時間提前，那么是否可以內(nèi)聯(lián)所有的CSS呢？答案顯然是否定的，這種方式并不適用于內(nèi)聯(lián)較大的CSS文件。因為初始擁塞窗口3存在限制（TCP相關(guān)概念，通常是 14.6kB，壓縮后大?。?，如果內(nèi)聯(lián)CSS后的文件超出了這一限制，系統(tǒng)就需要在服務(wù)器和瀏覽器之間進行更多次的往返，這樣并不能提前頁面渲染時間。因此，我們應(yīng)當(dāng)只將渲染首屏內(nèi)容所需的關(guān)鍵CSS內(nèi)聯(lián)到HTML中。

既然已經(jīng)知道內(nèi)聯(lián)首屏關(guān)鍵CSS能夠優(yōu)化性能了，那下一步就是如何確定首屏關(guān)鍵CSS了。顯然，我們不需要手動確定哪些內(nèi)容是首屏關(guān)鍵CSS。Github上有一個項目Critical CSS4，可以將屬于首屏的關(guān)鍵樣式提取出來，大家可以看一下該項目，結(jié)合自己的構(gòu)建工具進行使用。當(dāng)然為了保證正確，大家最好再親自確認(rèn)下提取出的內(nèi)容是否有缺失。

不過內(nèi)聯(lián)CSS有一個缺點，內(nèi)聯(lián)之后的CSS不會進行緩存，每次都會重新下載。不過如上所說，如果我們將內(nèi)聯(lián)后的文件大小控制在了14.6kb以內(nèi)，這似乎并不是什么大問題。

如上，我們已經(jīng)介紹了為什么要內(nèi)聯(lián)關(guān)鍵CSS以及如何內(nèi)聯(lián)，那么剩下的CSS我們怎么處理好呢？建議使用外部CSS引入剩余CSS，這樣能夠啟用緩存，除此之外還可以異步加載它們。

2. 異步加載CSS

CSS會阻塞渲染，在CSS文件請求、下載、解析完成之前，瀏覽器將不會渲染任何已處理的內(nèi)容。有時，這種阻塞是必須的，因為我們并不希望在所需的CSS加載之前，瀏覽器就開始渲染頁面。那么將首屏關(guān)鍵CSS內(nèi)聯(lián)后，剩余的CSS內(nèi)容的阻塞渲染就不是必需的了，可以使用外部CSS，并且異步加載。

那么如何實現(xiàn)CSS的異步加載呢？有以下四種方式可以實現(xiàn)瀏覽器異步加載CSS
。
第一種方式是使用JavaScript動態(tài)創(chuàng)建樣式表link元素，并插入到DOM中。

// 創(chuàng)建link標(biāo)簽
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屬性設(shè)置為用戶瀏覽器不匹配的媒體類型（或媒體查詢），如media=“print”，甚至可以是完全不存在的類型media=“noexist”。對瀏覽器來說，如果樣式表不適用于當(dāng)前媒體類型，其優(yōu)先級會被放低，會在不阻塞頁面渲染的情況下再進行下載。

當(dāng)然，這么做只是為了實現(xiàn)CSS的異步加載，別忘了在文件加載完成之后，將media的值設(shè)為screen或all，從而讓瀏覽器開始解析CSS。

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

與第二種方式相似，我們還可以通過rel屬性將link元素標(biāo)記為alternate可選樣式表，也能實現(xiàn)瀏覽器異步加載。同樣別忘了加載完成之后，將rel改回去。

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

上述的三種方法都較為古老。現(xiàn)在，rel="preload"5這一Web標(biāo)準(zhǔn)指出了如何異步加載資源，包括CSS類資源。

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

注意，as是必須的。忽略as屬性，或者錯誤的as屬性會使preload等同于XHR請求，瀏覽器不知道加載的是什么內(nèi)容，因此此類資源加載優(yōu)先級會非常低。as的可選值可以參考上述標(biāo)準(zhǔn)文檔。

看起來，rel="preload"的用法和上面兩種沒什么區(qū)別，都是通過更改某些屬性，使得瀏覽器異步加載CSS文件但不解析，直到加載完成并將修改還原，然后開始解析。

但是它們之間其實有一個很重要的不同點，那就是使用preload，比使用不匹配的media方法能夠更早地開始加載CSS。所以盡管這一標(biāo)準(zhǔn)的支持度還不完善，仍建議優(yōu)先使用該方法。
該標(biāo)準(zhǔn)現(xiàn)在已經(jīng)是候選標(biāo)準(zhǔn)，相信瀏覽器會逐漸支持該標(biāo)準(zhǔn)。在各瀏覽器的支持度如下圖所。

3. 文件壓縮

性能優(yōu)化時有一個最容易想到，也最常使用的方法，那就是文件壓縮，這一方案往往效果顯著。
文件的大小會直接影響瀏覽器的加載速度，這一點在網(wǎng)絡(luò)較差時表現(xiàn)地尤為明顯。相信大家都早已習(xí)慣對CSS進行壓縮，現(xiàn)在的構(gòu)建工具，如webpack、gulp/grunt、rollup等也都支持CSS壓縮功能。壓縮后的文件能夠明顯減小，可以大大降低了瀏覽器的加載時間。

4. 去除無用CSS

雖然文件壓縮能夠降低文件大小。但CSS文件壓縮通常只會去除無用的空格，這樣就限制了CSS文件的壓縮比例。那是否還有其他手段來精簡CSS呢？答案顯然是肯定的，如果壓縮后的文件仍然超出了預(yù)期的大小，我們可以試著找到并刪除代碼中無用的CSS。

一般情況下，會存在這兩種無用的CSS代碼：一種是不同元素或者其他情況下的重復(fù)代碼，一種是整個頁面內(nèi)沒有生效的CSS代碼。對于前者，在編寫的代碼時候，我們應(yīng)該盡可能地提取公共類，減少重復(fù)。對于后者，在不同開發(fā)者進行代碼維護的過程中，總會產(chǎn)生不再使用的CSS的代碼，當(dāng)然一個人編寫時也有可能出現(xiàn)這一問題。而這些無用的CSS代碼不僅會增加瀏覽器的下載量，還會增加瀏覽器的解析時間，這對性能來說是很大的消耗。所以我們需要找到并去除這些無用代碼。

當(dāng)然，如果手動刪除這些無用CSS是很低效的。我們可以借助Uncss7庫來進行。Uncss可以用來移除樣式表中的無用CSS，并且支持多文件和JavaScript注入的CSS。

前面已經(jīng)說完了實踐型的4個優(yōu)化技巧，下面我們介紹下建議型的4個技巧。

1. 有選擇地使用選擇器

大多數(shù)朋友應(yīng)該都知道CSS選擇器的匹配是從右向左進行的，這一策略導(dǎo)致了不同種類的選擇器之間的性能也存在差異。相比于#markdown-content-h4，顯然使用#markdown .content h4時，瀏覽器生成渲染樹（render-tree）所要花費的時間更多。因為后者需要先找到DOM中的所有h4元素，再過濾掉祖先元素不是.content的，最后過濾掉.content的祖先不是#markdown的。試想，如果嵌套的層級更多，頁面中的元素更多，那么匹配所要花費的時間代價自然更高。

不過現(xiàn)代瀏覽器在這一方面做了很多優(yōu)化，不同選擇器的性能差別并不明顯，甚至可以說差別甚微。此外不同選擇器在不同瀏覽器中的性能表現(xiàn)8也不完全統(tǒng)一，在編寫CSS的時候無法兼顧每種瀏覽器。鑒于這兩點原因，我們在使用選擇器時，只需要記住以下幾點，其他的可以全憑喜好。

• 保持簡單，不要使用嵌套過多過于復(fù)雜的選擇器。

• 通配符和屬性選擇器效率最低，需要匹配的元素最多，盡量避免使用。

• 不要使用類選擇器和ID選擇器修飾元素標(biāo)簽，如h4#markdown-content，這樣多此一舉，還會降低效率。

• 不要為了追求速度而放棄可讀性與可維護性。

如果大家對于上面這幾點還存在疑問，筆者建議大家選擇以下幾種CSS方法論之一（BEM9，OOCSS10，SUIT11，SMACSS12，ITCSS13，Enduring CSS14等）作為CSS編寫規(guī)范。使用統(tǒng)一的方法論能夠幫助大家形成統(tǒng)一的風(fēng)格，減少命名沖突，也能避免上述的問題，總之好處多多，如果你還沒有使用，就趕快用起來吧。

Tips：為什么CSS選擇器是從右向左匹配的？

CSS中更多的選擇器是不會匹配的，所以在考慮性能問題時，需要考慮的是如何在選擇器不匹配時提升效率。從右向左匹配就是為了達成這一目的的，通過這一策略能夠使得CSS選擇器在不匹配的時候效率更高。這樣想來，在匹配時多耗費一些性能也能夠想的通了。

2. 減少使用昂貴的屬性

在瀏覽器繪制屏幕時，所有需要瀏覽器進行操作或計算的屬性相對而言都需要花費更大的代價。當(dāng)頁面發(fā)生重繪時，它們會降低瀏覽器的渲染性能。所以在編寫CSS時，我們應(yīng)該盡量減少使用昂貴屬性，如box-shadow/border-radius/filter/透明度/:nth-child等。

當(dāng)然，并不是讓大家不要使用這些屬性，因為這些應(yīng)該都是我們經(jīng)常使用的屬性。之所以提這一點，是讓大家對此有一個了解。當(dāng)有兩種方案可以選擇的時候，可以優(yōu)先選擇沒有昂貴屬性或昂貴屬性更少的方案，如果每次都這樣的選擇，網(wǎng)站的性能會在不知不覺中得到一定的提升。

3. 優(yōu)化重排與重繪

在網(wǎng)站的使用過程中，某些操作會導(dǎo)致樣式的改變，這時瀏覽器需要檢測這些改變并重新渲染，其中有些操作所耗費的性能更多。我們都知道，當(dāng)FPS為60時，用戶使用網(wǎng)站時才會感到流暢。這也就是說，我們需要在16.67ms內(nèi)完成每次渲染相關(guān)的所有操作，所以我們要盡量減少耗費更多的操作。

3.1 減少重排

重排會導(dǎo)致瀏覽器重新計算整個文檔，重新構(gòu)建渲染樹，這一過程會降低瀏覽器的渲染速度。如下所示，有很多操作會觸發(fā)重排，我們應(yīng)該避免頻繁觸發(fā)這些操作。

• 改變font-size和font-family

• 改變元素的內(nèi)外邊距

• 通過JS改變CSS類

• 通過JS獲取DOM元素的位置相關(guān)屬性（如width/height/left等）

• CSS偽類激活

• 滾動滾動條或者改變窗口大小

此外，我們還可以通過CSS Trigger15查詢哪些屬性會觸發(fā)重排與重繪。

值得一提的是，某些CSS屬性具有更好的重排性能。如使用Flex時，比使用inline-block和float時重排更快，所以在布局時可以優(yōu)先考慮Flex。

3.2 避免不必要的重繪

當(dāng)元素的外觀（如color，background，visibility等屬性）發(fā)生改變時，會觸發(fā)重繪。在網(wǎng)站的使用過程中，重繪是無法避免的。不過，瀏覽器對此做了優(yōu)化，它會將多次的重排、重繪操作合并為一次執(zhí)行。不過我們?nèi)孕枰苊獠槐匾闹乩L，如頁面滾動時觸發(fā)的hover事件，可以在滾動的時候禁用hover事件，這樣頁面在滾動時會更加流暢。

此外，我們編寫的CSS中動畫相關(guān)的代碼越來越多，我們已經(jīng)習(xí)慣于使用動畫來提升用戶體驗。我們在編寫動畫時，也應(yīng)當(dāng)參考上述內(nèi)容，減少重繪重排的觸發(fā)。除此之外我們還可以通過硬件加速16和will-change17來提升動畫性能，本文不對此展開詳細(xì)介紹，感興趣的小伙伴可以點擊鏈接進行查看。

最后需要注意的是，用戶的設(shè)備可能并沒有想象中的那么好，至少不會有我們的開發(fā)機器那么好。我們可以借助Chrome的開發(fā)者工具進行CPU降速，然后再進行相關(guān)的測試

如果需要在移動端訪問的，最好將速度限制更低，因為移動端的性能往往更差。

4. 不要使用@import

最后提一下，不要使用@import引入CSS，相信大家也很少使用。

不建議使用@import主要有以下兩點原因。

首先，使用@import引入CSS會影響瀏覽器的并行下載。使用@import引用的CSS文件只有在引用它的那個css文件被下載、解析之后，瀏覽器才會知道還有另外一個css需要下載，這時才去下載，然后下載后開始解析、構(gòu)建render tree等一系列操作。這就導(dǎo)致瀏覽器無法并行下載所需的樣式文件。

其次，多個@import會導(dǎo)致下載順序紊亂。在IE中，@import會引發(fā)資源文件的下載順序被打亂，即排列在@import后面的js文件先于@import下載，并且打亂甚至破壞@import自身的并行下載。

所以不要使用這一方法，使用link標(biāo)簽就行了。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS性能優(yōu)化的一些小技巧”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

網(wǎng)站標(biāo)題：CSS性能優(yōu)化的一些小技巧
瀏覽地址：http://www.rwnh.cn/article46/igjpeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站導(dǎo)航、虛擬主機、移動網(wǎng)站建設(shè)、定制開發(fā)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)