怎么提升css性能

小編給大家分享一下怎么提升css性能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

提升方法： 1、將樣式寫(xiě)在css文件中，在head中引用；2、不使用“@import”；3、避免使用復(fù)雜的選擇器，層級(jí)越少越好；4、精簡(jiǎn)頁(yè)面的樣式文件；5、利用CSS繼承減少代碼量；6、慎重使用浮動(dòng)、定位屬性；7、標(biāo)準(zhǔn)化各種瀏覽器前綴等。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3版、Dell G3電腦。

如何提高CSS性能，根據(jù)頁(yè)面的加載性能和CSS代碼性能，主要表現(xiàn)為： 加載性能 （主要是從減少文件體積，減少阻塞加載，提高并發(fā)方面入手），選擇器性能，渲染性能，可維護(hù)性。

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

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

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

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

2、不使用@import

如果你使用@import屬性引入css的話,當(dāng)用戶瀏覽的網(wǎng)速較慢時(shí),他會(huì)看到一個(gè)沒(méi)有風(fēng)格樣式的頁(yè)面,然后隨著CSS文件被下載完成才可以看到應(yīng)有的風(fēng)格

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

項(xiàng)目的模塊越來(lái)越多，功能越來(lái)越復(fù)雜，我們寫(xiě)的CSS選擇器會(huì)內(nèi)套多層，越來(lái)越復(fù)雜。建議選擇器的嵌套最好不要超過(guò)三層，簡(jiǎn)潔的選擇器不僅可以減少css文件大小，提高頁(yè)面的加載性能，瀏覽器解析時(shí)也會(huì)更加高效，也會(huì)提高開(kāi)發(fā)人員的開(kāi)發(fā)效率，降低了維護(hù)成本。

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

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

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

根據(jù)當(dāng)前頁(yè)面需要的css去合并那些當(dāng)前頁(yè)面用到的CSS文件， 合并成一個(gè)文件有一個(gè)優(yōu)點(diǎn)：樣式文件會(huì)被瀏覽器緩存，進(jìn)入到其他頁(yè)面樣式文件不用再去下載。

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

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

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

一方面，浮動(dòng)的種種復(fù)雜的布局規(guī)則注定了它是一種試探性局部 reflow 式的布局算法。瀏覽器需要花費(fèi)很多精力來(lái)處理它。另一方面，浮動(dòng)元素的布局牽涉到的因素更多。在同一布局空間中，所有浮動(dòng)元素均存在于“靜態(tài)層”之上的“浮動(dòng)層”，不僅浮動(dòng)層中的多個(gè)浮動(dòng)元素會(huì)相互影響，浮動(dòng)元素與靜態(tài)層也有互動(dòng)。

7、css樣式前綴

標(biāo)準(zhǔn)化各種瀏覽器前綴，帶瀏覽器前綴的在前，標(biāo)準(zhǔn)的在后

8、css屬性值

屬性值為0時(shí)，不加單位

屬性值為浮點(diǎn)數(shù)0.**時(shí)，可以省略小數(shù)點(diǎn)前的0

css的三種引入方式

1.行內(nèi)樣式，最直接最簡(jiǎn)單的一種，直接對(duì)HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫(xiě)在之間，并且用

進(jìn)行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在之間加上

以上是“怎么提升css性能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！