在實習做乙個移動專案的時候，實現乙個動畫效果，在 iphone 和 chrome 上除錯沒有問題，在千元左右的 android 機上測試問題就很大了，卡頓非常明顯，百思不得其解，**，卒。
這個悲傷的故事就是本文的引子，真真切切的體會到了 css 對使用者體驗的影響非常明顯，稍有不慎就是乙個大坑。下面，我們就來談談 css 效能優化的問題。
對整體效能的影響可以忽略不計了，但是選擇器的考究更多是為了規範化和可維護性、健壯性。具體怎麼實施可以參考 github 的這個分享：github's css performance by jon rohan
渲染效能是 css 優化最重要的關注物件。我們先來了解一下瀏覽器的渲染機制。
瀏覽器渲染展示網頁的過程，大致分為以下幾個步驟：
解析html(html parser)
構建dom樹(dom tree)
渲染樹構建(render tree)
繪製渲染樹(painting)
什麼 css 屬性是高消耗的？就是那些繪製前需要瀏覽器進行大量計算的屬性。
簡單解釋一下 reflow：當元素改變的時候，將會影響文件內容或結構，或元素位置，此過程稱為 reflow。
常見的重排元素
width
height
padding
margin
display
border-width
border
topposition
font-size
float
text-align
overflow-y
font-weight
overflow
left
font-family
line-height
vertical-align
right
clear
white-space
bottom
min-height
怎麼減少 reflow
不要一條一條地修改 dom 的樣式，預先定義好 class，然後修改 dom 的classname
把 dom 離線後修改，比如：先把 dom 給display:none(有一次 reflow)，然後你修改100次，然後再把它顯示出來
不要把 dom 結點的屬性值放在乙個迴圈裡當成迴圈裡的變數
盡可能不要修改影響範圍比較大的 dom
為動畫的元素使用絕對定位absolute / fixed
不要使用table布局，可能很小的乙個小改動會造成整個 table 的重新布局
當元素改變的時候，將不會影響元素在頁面當中的位置（比如background-color,border-color,visibility），瀏覽器僅僅會應用新的樣式重繪此元素，此過程稱為repaint。
常見的重繪元素
color
border-style
visibility
background
text-decoration
background-image
background-position
background-repeat
outline-color
outline
outline-style
border-radius
outline-width
box-shadow
background-size
css3 動畫是優化的重中之重。除了做到上面兩點，減少 reflow 和 repaints之外，還需要注意以下方面。
啟用 gpu 硬體加速
/*
* 根據上面的結論
* 將 2d transform 換成 3d
* 就可以強制開啟 gpu 加速
* 提高動畫效能
*/div
div
CSS效能優化
css是負責布局和渲染的重要角色，漂亮的頁面當然能夠吸引使用者。本文是自己在開發過程中總結的關於css與效能的關係，可能有不對之處，希望能夠指出。1 所有的樣式盡量放在css檔案中，html標籤中不要寫style屬性，因為瀏覽器在所有的樣式載入完成之後，才會開始渲染整個頁面，寫在標籤屬性必會加長瀏覽...
CSS效能優化
css最耗費效能的無疑是動畫效果,其中包含border radius 圓角 box shadows 陰影 transparency 透明色 transforms 變形 filters 濾鏡 動畫效果的優化利用硬體能力.開啟gpu加速 利用translate3d實現動畫位移.而非簡單的top left...
前端css效能優化
1.避免使用 important 外部的css檔案中使用 important會使得頁面在載入時增加額外的延遲。最好使用link 2.避免使用css表示式 表示式可能會造成極大的計算量 3.避免通配選擇器 在初期使用 以此來消除標籤的預設布局和不同瀏覽器的對同乙個標籤的不同的渲染。4.移除無匹配的樣式...