样式优化

最后更新于:2022-04-02 05:28:25

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