小編給大家分享一下怎么提升css性能,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
專業(yè)成都網(wǎng)站建設(shè)公司,做排名好的好網(wǎng)站,排在同行前面,為您帶來客戶和效益!成都創(chuàng)新互聯(lián)公司為您提供成都網(wǎng)站建設(shè),五站合一網(wǎng)站設(shè)計制作,服務(wù)好的網(wǎng)站設(shè)計公司,成都網(wǎng)站建設(shè)、成都網(wǎng)站制作負(fù)責(zé)任的成都網(wǎng)站制作公司!
提升方法: 1、將樣式寫在css文件中,在head中引用;2、不使用“@import”;3、避免使用復(fù)雜的選擇器,層級越少越好;4、精簡頁面的樣式文件;5、利用CSS繼承減少代碼量;6、慎重使用浮動、定位屬性;7、標(biāo)準(zhǔn)化各種瀏覽器前綴等。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3版、Dell G3電腦。
如何提高CSS性能,根據(jù)頁面的加載性能和CSS代碼性能,主要表現(xiàn)為: 加載性能(主要是從減少文件體積,減少阻塞加載,提高并發(fā)方面入手),選擇器性能,渲染性能,可維護(hù)性。
1、盡量將樣式寫在單獨的css文件里面,在head元素中引用
(1)內(nèi)容和樣式分離,易于管理和維護(hù)
(2)減少頁面體積
(3)css文件可以被緩存、重用,維護(hù)成本降低
2、不使用@import
如果你使用@import屬性引入css的話,當(dāng)用戶瀏覽的網(wǎng)速較慢時,他會看到一個沒有風(fēng)格樣式的頁面,然后隨著CSS文件被下載完成才可以看到應(yīng)有的風(fēng)格
3、避免使用復(fù)雜的選擇器,層級越少越好
項目的模塊越來越多,功能越來越復(fù)雜,我們寫的CSS選擇器會內(nèi)套多層,越來越復(fù)雜。建議選擇器的嵌套最好不要超過三層,簡潔的選擇器不僅可以減少css文件大小,提高頁面的加載性能,瀏覽器解析時也會更加高效,也會提高開發(fā)人員的開發(fā)效率,降低了維護(hù)成本。
4、精簡頁面的樣式文件,去掉不用的樣式
(1)樣式文件偏大,影響加載速度
(2)瀏覽器會進(jìn)行多余的樣式匹配,影響渲染時間。
根據(jù)當(dāng)前頁面需要的css去合并那些當(dāng)前頁面用到的CSS文件, 合并成一個文件有一個優(yōu)點:樣式文件會被瀏覽器緩存,進(jìn)入到其他頁面樣式文件不用再去下載。
5、利用CSS繼承減少代碼量
我們知道有一部分CSS代碼是可以繼承的,如果父元素已經(jīng)設(shè)置了該樣式,子元素就不需要去設(shè)置該樣式,這個也是提高性能的行之有效的方法。
6、慎重使用高性能屬性:浮動、定位;
一方面,浮動的種種復(fù)雜的布局規(guī)則注定了它是一種試探性局部 reflow 式的布局算法。瀏覽器需要花費很多精力來處理它。另一方面,浮動元素的布局牽涉到的因素更多。在同一布局空間中,所有浮動元素均存在于“靜態(tài)層”之上的“浮動層”,不僅浮動層中的多個浮動元素會相互影響,浮動元素與靜態(tài)層也有互動。
7、css樣式前綴
標(biāo)準(zhǔn)化各種瀏覽器前綴,帶瀏覽器前綴的在前,標(biāo)準(zhǔn)的在后
8、css屬性值
屬性值為0時,不加單位
屬性值為浮點數(shù)0.**時,可以省略小數(shù)點前的0
1.行內(nèi)樣式,最直接最簡單的一種,直接對HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式,就是將CSS代碼寫在之間,并且用
進(jìn)行聲明。3.外部樣式,其中鏈接樣式是使用頻率最高,最實用的樣式,只需要在之間加上
就可以了。其次就是導(dǎo)入樣式,導(dǎo)入樣式和鏈接樣式比較相似,采用@import樣式導(dǎo)入CSS樣式表,不建議使用。以上是“怎么提升css性能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章標(biāo)題:怎么提升css性能
網(wǎng)頁地址:http://www.rwnh.cn/article0/gopcio.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計、標(biāo)簽優(yōu)化、企業(yè)建站、外貿(mào)建站、品牌網(wǎng)站制作、
聲明:本網(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)