CSS優化,提高性能的方法有哪些?


1,首推的是合並css文件,如果頁面加載10個css文件,每個文件1k,那么也要比只加載一個100k的css文件慢。

2,減少css嵌套,最好不要套三層以上。

3,不要在ID選擇器前面進行嵌套,ID本來就是唯一的而且人家權值那么大,嵌套完全是浪費性能。

4,建立公共樣式類,把相同樣式提取出來作為公共類使用,比如我們常用的清除浮動等。

5,減少通配符*或者類似[hidden="true"]這類選擇器的使用,挨個查找所有...這性能能好嗎?當然重置樣式這些必須 的東西是不能少的。

6,巧妙運用css的繼承機制,如果父節點定義了,子節點就無需定義。

7,拆分出公共css文件,對於比較大的項目我們可以將大部分頁面的公共結構的樣式提取出來放到單獨css文件里, 這樣一次下載后就放到緩存里,當然這種做法會增加請求,具體做法應以實際情況而定。

8,不用css表達式,表達式只是讓你的代碼顯得更加炫酷,但是他對性能的浪費可能是超乎你的想象的。

9,少用css rest,可能你會覺得重置樣式是規范,但是其實其中有很多的操作是不必要不友好的,有需求有興趣的 朋友可以選擇normolize.css

10,cssSprite,合成所有icon圖片,用寬高加上bacgroud-position的背景圖方式顯現出我們要的icon圖,這是一種 十分實用的技巧,極大減少了http請求。

11,當然我們還需要一些善后工作,CSS壓縮(這里提供一個在線壓縮 YUI Compressor ,當然你會用其他工具來壓縮是十 分好的),

12,GZIP壓縮,Gzip是一種流行的文件壓縮算法,詳細做法可以谷歌或者百度。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM