如何提高CSS性能，根據(jù)頁(yè)面的加載性能和CSS代碼性能，主要總結(jié)有下面幾點(diǎn)：

　　1、盡量將樣式寫(xiě)在單獨(dú)的css文件里面，在head元素中引用

　　有時(shí)候?yàn)榱藞D方便或者快速搞定功能，我們可能會(huì)直接將樣式寫(xiě)在頁(yè)面的style標(biāo)簽或者直接內(nèi)聯(lián)在元素上，這樣雖然簡(jiǎn)單方便，但是非常不利于日后的維護(hù)。將代碼寫(xiě)成單獨(dú)的css文件有幾點(diǎn)好處：

　　(1)內(nèi)容和樣式分離，易于管理和維護(hù)

　　(2)減少頁(yè)面體積

　　(3)css文件可以被緩存、重用，維護(hù)成本降低

　　2、不使用@import

　　這條手段已經(jīng)是眾所周知，這里簡(jiǎn)單提一下，@import影響css文件的加載速度

　　3、避免使用復(fù)雜的選擇器，層級(jí)越少越好

　　有時(shí)候項(xiàng)目的模塊越來(lái)越多，功能越來(lái)越復(fù)雜，我們寫(xiě)的CSS選擇器會(huì)內(nèi)套多層，越來(lái)越復(fù)雜。

　　建議選擇器的嵌套最好不要超過(guò)三層，比如：

.header .logo .text{}

　　可以優(yōu)化成

.haeder .logo-text{}

　　簡(jiǎn)潔的選擇器不僅可以減少css文件大小，提高頁(yè)面的加載性能，瀏覽器解析時(shí)也會(huì)更加高效，也會(huì)提高開(kāi)發(fā)人員的開(kāi)發(fā)效率，降低了維護(hù)成本。

?

　　4、精簡(jiǎn)頁(yè)面的樣式文件，去掉不用的樣式

　　很多時(shí)候，我們會(huì)把所有的樣式文件合并成一個(gè)文件，但是這樣有一個(gè)問(wèn)題：很多其他頁(yè)面的CSS同時(shí)引用到當(dāng)前頁(yè)面中，而當(dāng)前頁(yè)面并沒(méi)有用到它們，這種情況會(huì)造成兩個(gè)問(wèn)題：

　　(1)樣式文件偏大，影響加載速度

　　(2)瀏覽器會(huì)進(jìn)行多余的樣式匹配，影響渲染時(shí)間。

　　正確的處理方法是根據(jù)當(dāng)前頁(yè)面需要的css去合并那些當(dāng)前頁(yè)面用到的CSS文件。

?

　　PS：合并成一個(gè)文件有一個(gè)優(yōu)點(diǎn)：樣式文件會(huì)被瀏覽器緩存，進(jìn)入到其他頁(yè)面樣式文件不用再去下載。這條規(guī)則應(yīng)根據(jù)場(chǎng)景來(lái)區(qū)別對(duì)待，如果是大項(xiàng)目，應(yīng)該合并成不同的樣式文件，如果是簡(jiǎn)單的項(xiàng)目，建議合并成一個(gè)文件即可。如果無(wú)法確認(rèn)項(xiàng)目規(guī)模，建議分開(kāi)成不同的樣式文件，日后要合并也比較方便。

?

　　5、利用CSS繼承減少代碼量

　　我們知道有一部分CSS代碼是可以繼承的，如果父元素已經(jīng)設(shè)置了該樣式，子元素就不需要去設(shè)置該樣式，這個(gè)也是提高性能的行之有效的方法。

　　常見(jiàn)的可以繼承的屬性比如：

　　color，font-size，font-family等等

　　不可繼承的比如：

　　position，display，float等

?

　　6、慎重使用高性能屬性：浮動(dòng)、定位；

?

轉(zhuǎn)載于:https://www.cnblogs.com/mysun-shine/p/6434377.html

總結(jié)

以上是生活随笔為你收集整理的CSS 优化、提高性能的方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。