https://www.jianshu.com/p/b2a687248d00

一、頁面卡頓的原因

影象的顯示原理：影象的顯示需要GPU和CPU兩者配合，CPU主要負責檢視的建立，佈局的計算和檢視的繪製，然後進行圖片的解碼，將生成的點陣圖交給GPU，GPU進行渲染，並將渲染的結果交到幀緩衝區，待下一個VSync 訊號到來的時候視訊控制器從幀緩衝區取出資料，經過轉換，顯示到螢幕上。

如果在規定的16.7ms內，CPU和GPU的合作未完成，沒有生成新的渲染資料到幀緩衝區中，那麼就會出現卡頓或者掉幀的情況。

二、頁面卡頓優化方案

那麼針對卡頓和掉幀的優化方案，在知曉了影象顯示需要CPU和GPU配合工作後，就可以從CPU和GPU兩方面入手：

CPU

1、儘量使用輕量級的物件，比如用不到事件處理的地方，可以考慮用CALayer取代UIView；
2、不要頻繁地呼叫UIView的相關屬性，比如frame、bounds、transform等屬性，儘量減少不必要的修改；
3、儘量提前計算好佈局，在有需要時一次性調整對應的屬性，不要多次修改屬性；
4、Autolayout會比直接設定frame消耗更多的CPU資源；
5、圖片的size最好剛好跟UIImageView的size保持一致；
6、控制一下執行緒的最大併發數；
7、儘量把耗時的操作放到子執行緒

• 文字處理（尺寸計算、繪製）
• 圖片處理（解碼、繪製）

GPU

1、儘量減少檢視數量和層次；
2、儘量避免短時間內大量圖片的顯示，儘可能將多張圖片合成一張進行顯示；
3、GPU能處理的最大紋理尺寸是4096*4096，一旦超過這個尺寸，就會佔用CPU資源進行處理，所以紋理儘量不要超過這個尺寸；
4、減少透明的檢視（alpha<1），不透明的就設定opaque為YES；
5、儘量避免出現離屏渲染。離屏渲染需要建立新的緩衝區，同時整個過程需要多次切換上下文環境，非常消耗效能。可能造成離屏渲染的原因如下：

• 光柵化，layer.shouldRasterize = YES
• 遮罩，layer.mask
• 圓角，同時設定layer.maskToBounds = YES、layer.cornerRadius大於0。考慮通過CoreGraphics繪製裁剪圓角，或者讓美工提供圓角圖片
• 陰影，layer.shadowXXX。如果設定了layer.shadowPath就不會產生離屏渲染