UI卡顿掉帧原因

下图中上面代表vsync垂直信号，我们一般说页面滑动流畅性是60fps指的就是每一秒钟会有60帧的画面更新，人眼所看到的就是流畅的效果，相当于每隔16.7ms（也就是1/60s）就要产生一帧画面，那么在这16.7ms之内需要由CPU和GPU共同协同完成产生一帧的数据。比如说 CPU花费一定的时间做文本布局UI计算，包括一些视图的绘制以及图片解码，然后把产生的位图最终提交给GPU，再由GPU进行相应的图层的合成纹理渲染，然后准备好下一帧画面，在下一帧的VSync信号到来的时候就可以显示这样一个画面，假如CPU在做刚才所描述的UI布局，文本计算包括图片解码以及绘制等工作时长特别长的话，那么留给GPU的时间就特别少，那GPU要想把图层的合成纹理渲染全部准备完毕可能就要总时间超过16.7ms，这样的话在下一帧VSync信号到来的时候没有准备好当下的的这一帧画面，那么就由此产生了掉帧，看到的效果就是滑动的卡顿 ，这就可以解释UI卡顿和掉帧的原因。
总结一句话，就是在规定的16.7ms之内，在下一帧VSync信号到来之前，并没有CPU和GPU共同完成下一帧画面合成，于是就会导致卡顿或者掉帧。

UI卡顿掉帧的原因

• 基于tableView或者scrollView的优化方案：
  上面分析了CPU在准备下一帧画面之前所做的工作非常多，实际上基于减轻CPU所做的工作时长，包括它的压力来达到一个优化的效果。基于CPU，首先对于对象创建、调整、销毁可以放到子线程去做，这样可以节省一部分CPU的时间，第二优化方案是关于预排版，比如我们对UI的布局计算、文本计算全都放到子线程当中去做，主线程就可以有更多的时间去响应用户的交互，再比如关于预渲染，预渲染主要是包含两部分，文本的异步绘制，图片的编解码等相关内容，这也是基于CPU的滑动优化的高级方案。

  
  滑动优化方案-CPU

那么关于GPU也有响应的优化方案，比如对于纹理渲染，假如我们触发了离屏渲染就会产生一些layer圆角，包括maskToBounds的设置，一些阴影蒙层都会触发GPU的离屏渲染。这种情况下，GPU做纹理渲染的工作量就会非常大，我们可以基于此对GPU金牛星优化，就是尽量避免离屏渲染，同时可以依托于CPU的异步绘制机制来减轻GPU的压力。关于GPU另一方面的优化方案就体现在视图的混合，比如视图层级非常复杂，有多个视图层层叠加，那么就要做每个视图的合成，合成每个像素点的对应的像素值，它需要做大量的计算，假如在一定程度上减轻视图层级的复杂性，那也可以减轻GPU的压力，包括也可以通过CPU层面的异步绘制机制来达到提交的位图本身就是一个层级非常少的视图，这样的话也可以减轻GPU的压力。

滑动优化方案-GPU