## 前言 本文主要摘录一些样式优化可以采取的切实可行的措施 。 ## 简化dom，dom操作优化 简化dom：主要是针对dom结构进行简化，尽量用少的dom结构完成业务和交互需求。 dom操作优化：主要是因为js对dom访问的是比较低性能的，所以一般都建议将dom对应的字符串拼接好之后进行一次插入或者移除，避免多次操作。 ## 减少重绘和重排 重排 ：主要是指元素的几何空间发生变化就会重新计算布局等， 重绘：主要是指元素的展现样式发生变化，除了transform,opacity之外的样式属性都会导致节点的重绘。 所以我们建议如下： 能重绘解决的不用重排，能用css3解决的不用重绘。具体实践时可以将一些变化位置的节点放到非正常文档流中，比如可以用绝对定位等。然后元素的隐藏等也可以通过是将元素放到不可见区域即可。 ## 页面动画优化 尽量使用 CSS3 的动画，使用 transform 和 opacity 属性更改来实现动画。使用 will-change 或 translateZ 提升移动的元素。避免过度使用提升规则；各层都需要内存和管理开销。此外，需要减少动画的图层，每多一个图层，会多一份内存占有和管理的开销。 如果一定要使用 js 的动画，建议使用：requestAnimationFrame。此外，能不用页面动画的场景尽量不要使用动画，如果一定要使用，可以简化动画渲染的过程。 需要提到的是，之前在移动端有的项目会引用iscroll这样一个控件，但在使用的时候会有性能问题，所以针对这种简单的效果，可以用css3动画结合touch事件代替。