CSS 优化、提高性能的方法
如何提高CSS性能,根據(jù)頁面的加載性能和CSS代碼性能,主要總結(jié)有下面幾點:
1、盡量將樣式寫在單獨的css文件里面,在head元素中引用
有時候為了圖方便或者快速搞定功能,我們可能會直接將樣式寫在頁面的style標(biāo)簽或者直接內(nèi)聯(lián)在元素上,這樣雖然簡單方便,但是非常不利于日后的維護(hù)。將代碼寫成單獨的css文件有幾點好處:
(1)內(nèi)容和樣式分離,易于管理和維護(hù)
(2)減少頁面體積
(3)css文件可以被緩存、重用,維護(hù)成本降低
2、不使用@import
這條手段已經(jīng)是眾所周知,這里簡單提一下,@import影響css文件的加載速度
3、避免使用復(fù)雜的選擇器,層級越少越好
有時候項目的模塊越來越多,功能越來越復(fù)雜,我們寫的CSS選擇器會內(nèi)套多層,越來越復(fù)雜。
建議選擇器的嵌套最好不要超過三層,比如:
.header .logo .text{}可以優(yōu)化成
.haeder .logo-text{}簡潔的選擇器不僅可以減少css文件大小,提高頁面的加載性能,瀏覽器解析時也會更加高效,也會提高開發(fā)人員的開發(fā)效率,降低了維護(hù)成本。
?
4、精簡頁面的樣式文件,去掉不用的樣式
很多時候,我們會把所有的樣式文件合并成一個文件,但是這樣有一個問題:很多其他頁面的CSS同時引用到當(dāng)前頁面中,而當(dāng)前頁面并沒有用到它們,這種情況會造成兩個問題:
(1)樣式文件偏大,影響加載速度
(2)瀏覽器會進(jìn)行多余的樣式匹配,影響渲染時間。
正確的處理方法是根據(jù)當(dāng)前頁面需要的css去合并那些當(dāng)前頁面用到的CSS文件。
?
PS:合并成一個文件有一個優(yōu)點:樣式文件會被瀏覽器緩存,進(jìn)入到其他頁面樣式文件不用再去下載。這條規(guī)則應(yīng)根據(jù)場景來區(qū)別對待,如果是大項目,應(yīng)該合并成不同的樣式文件,如果是簡單的項目,建議合并成一個文件即可。如果無法確認(rèn)項目規(guī)模,建議分開成不同的樣式文件,日后要合并也比較方便。
?
5、利用CSS繼承減少代碼量
我們知道有一部分CSS代碼是可以繼承的,如果父元素已經(jīng)設(shè)置了該樣式,子元素就不需要去設(shè)置該樣式,這個也是提高性能的行之有效的方法。
常見的可以繼承的屬性比如:
color,font-size,font-family等等
不可繼承的比如:
position,display,float等
?
6、慎重使用高性能屬性:浮動、定位;
?
轉(zhuǎn)載于:https://www.cnblogs.com/mysun-shine/p/6434377.html
總結(jié)
以上是生活随笔為你收集整理的CSS 优化、提高性能的方法的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux系统如何限制xhost访问60
- 下一篇: CSS3实现Loading动画特效