css是負責布局和渲染的重要角色，漂亮的頁面當然能夠吸引使用者。本文是自己在開發過程中總結的關於css與效能的關係，可能有不對之處，希望能夠指出。
1、所有的樣式盡量放在css檔案中，html標籤中不要寫style屬性，因為瀏覽器在所有的樣式載入完成之後，才會開始渲染整個頁面，寫在標籤屬性必會加長瀏覽器的渲染時間
2、刪除預設樣式**
因為會影響瀏覽器的執行時間。如：align="left"，預設就是左對齊
3、減少使用相對定位
因為這會影響瀏覽器的repain和reflow。如：position：absolute
4、css 縮寫
css 縮寫可以讓你用極少的**定義一系列樣式屬性，這種做法可以極大程度的縮減**量以達到提高效能的目的。如：#ff00ff替換成#f0f
5、對css屬性進行合併
屬性合併減少**量和瀏覽器的渲染時間以達到提高效能的目的。如：font-size: 36px; font-family: arial; line-height: 48px; font-weight: bold;替換成font:bold 36px/48px arial;
6、css選擇器
7、避免使用 css表示式
css表示式只有ie瀏覽器可以執行，但是計算次數比較頻繁，不僅頁面渲染和改變大小 (resize) 時會執行，頁面滾動 (scroll) 時也會執行，甚至連滑鼠在頁面上滑動時都會執行。
8、利用繼承機制，減少css
如果很多子節點都需要設定該 css 屬性值，可以統一設定其父節點的該 css 屬性，這樣一來，所有的子節點再無需做額外設定，加速了 css 的分析效率。
9、樣式放在html頁面頭部載入
瀏覽器在所有的樣式載入完成之後，才會開始渲染整個頁面，在此之前，瀏覽器不會渲染頁面裡的任何內容，頁面會一直呈現空白。
10、避免使用濾鏡
11、利用data:image/png;base64來代替url載入
"data"型別的url格式，是在rfc2397中 提出的，目的對於一些「小」的資料，可以在網頁中直接嵌入，而不是從外部檔案載入。
12、減少重複的樣式，多人開發時會出現多個人定義同乙個樣式，可以借助瀏覽器檢測
13、合併、壓縮你的css檔案，減少http請求，可以借助工具或者自動化構建。
14、使用css sprite來處理你的
現在專案中越來越重視使用者體驗，在這種情況下我們必須寫出高效能的**，減少使用者等待時間是我們第一要解決的問題。
CSS效能優化
css最耗費效能的無疑是動畫效果,其中包含border radius 圓角 box shadows 陰影 transparency 透明色 transforms 變形 filters 濾鏡 動畫效果的優化利用硬體能力.開啟gpu加速 利用translate3d實現動畫位移.而非簡單的top left...
前端css效能優化
1.避免使用 important 外部的css檔案中使用 important會使得頁面在載入時增加額外的延遲。最好使用link 2.避免使用css表示式 表示式可能會造成極大的計算量 3.避免通配選擇器 在初期使用 以此來消除標籤的預設布局和不同瀏覽器的對同乙個標籤的不同的渲染。4.移除無匹配的樣式...
CSS 效能優化筆記
在實習做乙個移動專案的時候，實現乙個動畫效果，在 iphone 和 chrome 上除錯沒有問題，在千元左右的 android 機上測試問題就很大了，卡頓非常明顯，百思不得其解，卒。這個悲傷的故事就是本文的引子，真真切切的體會到了 css 對使用者體驗的影響非常明顯，稍有不慎就是乙個大坑。下面，我們...