样式优化
最后更新于: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事件代替。
';