圖像顯示原理

image.png

1.CPU:輸出位圖
2.GPU :圖層渲染，紋理合成
3.把結果放到幀緩沖區(frame buffer)中
4.再由視頻控制器根據vsync信號在指定時間之前去提取幀緩沖區的屏幕顯示內容
5.顯示到屏幕上

CPU工作
1.Layout: UI布局，文本計算
2.Display: 繪制
3.Prepare: 圖片解碼
4.Commit：提交位圖

GPU渲染管線(OpenGL)
頂點著色，圖元裝配，光柵化，片段著色，片段處理

?

UI卡頓掉幀原因

一般來說，頁面滑動流暢是60fps，也就是1s有60幀更新，即每隔16.7ms就要產生一幀畫面，而如果CPU和GPU加起來的處理時間超過了16.7ms，就會造成掉幀甚至卡頓。

?

滑動優化方案

CPU：把以下操作放在子線程中
1.對象創建、調整、銷毀
2.預排版（布局計算、文本計算、緩存高度等等）
3.預渲染（文本等異步繪制，圖片解碼，圖像繪制等）

GPU:
紋理渲染，視圖混合，圖形生成

一般遇到性能問題時，考慮以下問題：
是否受到CPU或者GPU的限制？
是否有不必要的CPU渲染？
是否有太多的離屏渲染操作？
是否有太多的圖層混合操作？
是否有奇怪的圖片格式或者尺寸？
是否涉及到昂貴的view或者效果？
view的層次結構是否合理？

?

離屏渲染

一般情況下，都是在當前顯示屏幕緩沖區中進行的，但是當有圓角等特殊情況時，此時在屏幕緩沖區中無法進行渲染，需要生成一個新的緩沖區中進行渲染，然后繪制到屏幕緩沖區，這個過程需要進行上下文切換，會消耗很多資源。而且這個過程每一幀都會進行。

會觸發離屏渲染的操作：

shouldRasterize（光柵化）
masks（遮罩）
shadows（陰影）
edge antialiasing（抗鋸齒）
group opacity（不透明）
圓角（當和maskToBounds一起使用時）
漸變
Text（UILabel, CATextLayer, Core Text, etc）...

參考：iOS-離屏渲染詳解
參考：iOS-圖像顯示優化