日常工作中,我们总会遇到一些反馈,用户称页面滑动不流畅偶尔还无响应,这个时候很多用户在有其他更优选择的情况下,就不会继续使用这个APP了,所以卡顿对APP的伤害巨大,是必须要重点解决的问题。
卡顿产生原因
在我们滑动页面时,一般用60FPS来表示页面的滑动流畅性,即每一秒钟会有60帧的画面更新,即每隔16.7ms就要产生一帧画面,这样才会看到流畅的效果;
我们看到流畅的显示页面,是CPU与GPU协同合作的结果,CPU 负责计算显示内容,比如布局计算、图片解码、文本绘制等操作。 CPU 将计算好的内容交给GPU,由 GPU 进行变换、合成、渲染。之后把渲染结果提交到帧缓冲区去,等待下一次 VSync 信号到来时显示到屏幕上。
在一个Vsync信号到来之前,CPU与GPU的没有共同完成下一画面的合成工作,比如CPU加载时间过长,导致GPU来不及做合成渲染等工作,那么这一帧内容就会等待下一次机会显示,这时候页面就会停留于上一帧内容,在用户视觉上就会出现卡顿。
滑动优化方案
CPU
对象创建、调整、销毁可以放到子线程中去
在子线程中对UI进行预排版,比如布局计算、文本计算等
对文本异步绘制、图片编解码等也要做预渲染
GPU
避免离屏渲染
减少过多视图层级
离屏渲染
在当前屏幕缓冲区外,GPU从新开辟一个缓冲区进行渲染操作,当我们设置某些属性,导致不能直接显示时,就会导致离屏渲染,例如设置圆角属性、蒙层遮罩等
触发场景
1、圆角(makeToBounds 为 Yes时才会触发)
2、图层蒙版
3、阴影
4、光栅化
为何要避免
离屏渲染会创建新的渲染缓冲区,内存开销会增大,会增加GPU的工作量,导致CPU与GPU工作总耗时超过16.7ms,从而导致了UI的卡顿和掉帧现象。