日常工作中，我們總會遇到一些反饋，用戶稱頁面滑動不流暢偶爾還無響應，這個時候很多用戶在有其他更優選擇的情況下，就不會繼續使用這個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的卡頓和掉幀現象。