## 前言 本文主要摘錄一些樣式優化可以采取的切實可行的措施 。 ## 簡化dom，dom操作優化 簡化dom：主要是針對dom結構進行簡化，盡量用少的dom結構完成業務和交互需求。 dom操作優化：主要是因為js對dom訪問的是比較低性能的，所以一般都建議將dom對應的字符串拼接好之后進行一次插入或者移除，避免多次操作。 ## 減少重繪和重排 重排 ：主要是指元素的幾何空間發生變化就會重新計算布局等， 重繪：主要是指元素的展現樣式發生變化，除了transform,opacity之外的樣式屬性都會導致節點的重繪。 所以我們建議如下： 能重繪解決的不用重排，能用css3解決的不用重繪。具體實踐時可以將一些變化位置的節點放到非正常文檔流中，比如可以用絕對定位等。然后元素的隱藏等也可以通過是將元素放到不可見區域即可。 ## 頁面動畫優化 盡量使用 CSS3 的動畫，使用 transform 和 opacity 屬性更改來實現動畫。使用 will-change 或 translateZ 提升移動的元素。避免過度使用提升規則；各層都需要內存和管理開銷。此外，需要減少動畫的圖層，每多一個圖層，會多一份內存占有和管理的開銷。 如果一定要使用 js 的動畫，建議使用：requestAnimationFrame。此外，能不用頁面動畫的場景盡量不要使用動畫，如果一定要使用，可以簡化動畫渲染的過程。 需要提到的是，之前在移動端有的項目會引用iscroll這樣一個控件，但在使用的時候會有性能問題，所以針對這種簡單的效果，可以用css3動畫結合touch事件代替。