頁面卡頓的優化 圓角

2021-09-11 10:57:02 字數 2083 閱讀 2467

今天產品經理告訴我:誒,那個誰,這個介面很卡誒!!!你看看什麼情況。。。於是我掏出了instrument裡的core animation看看fps,發現滑動的時候fps特別低orz!

產生卡頓的原因

首先,查閱資料看下為什麼會產生卡頓的原因。

在 ios 系統中,影象內容展示到螢幕的過程需要 cpu 和 gpu 共同參與。cpu 負責計算顯示內容,比如檢視的建立、布局計算、解碼、文字繪製等。隨後 cpu 會將計算好的內容提交到 gpu 去,由 gpu 進行變換、合成、渲染。之後 gpu 會把渲染結果提交到幀緩衝區去,等待下一次 vsync 訊號到來時顯示到螢幕上。由於垂直同步的機制,如果在乙個 vsync 時間內,cpu 或者 gpu 沒有完成內容提交,則那一幀就會被丟棄,等待下一次機會再顯示,而這時顯示屏會保留之前的內容不變。這就是介面卡頓的原因。 那gpu什麼時候會消耗呢,相對於cpu,gpu做的事情比較單一,接收提交的紋理(texture)和頂點描述(三角形),應用變換(transform)、混合並渲染,然後輸出到螢幕上。寬泛的說,大多數 calayer 的屬性都是用 gpu 來繪製。以下操作會降低gpu的效能:

大量幾何結構

所有的 bitmap,包括、文字、柵格化的內容,最終都要由記憶體提交到視訊記憶體,繫結為 gpu texture。不論是提交到視訊記憶體的過程,還是 gpu 調整和渲染 texture 的過程,都要消耗不少 gpu 資源。當在較短時間顯示大量時(比如 tableview 存在非常多的並且快速滑動時),cpu 佔用率很低,gpu 占用非常高,介面仍然會掉幀。避免這種情況的方法只能是儘量減少在短時間內大量的顯示,盡可能將多張合成為一張進行顯示。 另外當過大,超過 gpu 的最大紋理尺寸時,需要先由 cpu 進行預處理,這對 cpu 和 gpu 都會帶來額外的資源消耗。

檢視的混合

當多個檢視(或者說 calayer)重疊在一起顯示時,gpu 會首先把他們混合到一起。如果檢視結構過於複雜,混合的過程也會消耗很多 gpu 資源。為了減輕這種情況的 gpu 消耗,應用應當儘量減少檢視數量和層次,並且減少不必要的透明檢視。

離屏渲染

離屏渲染是指圖層在被顯示之前是在當前螢幕緩衝區以外開闢的乙個緩衝區進行渲染操作。 離屏渲染需要多次切換上下文環境:先是從當前螢幕(on-screen)切換到離屏(off-screen);等到離屏渲染結束以後,將離屏緩衝區的渲染結果顯示到螢幕上又需要將上下文環境從離屏切換到當前螢幕,而上下文環境的切換是一項高開銷的動作。 會造成 offscreen rendering 的原因有: 陰影(uiview.layer.shadowoffset/shadowradius/…) 圓角(當 uiview.layer.cornerradius 和 uiview.layer.masktobounds 一起使用時) 圖層蒙板 開啟光柵化(shouldrasterize = true)

圓角優化

所以我們找到了原因,由於我們的專案是基於地圖的,在地圖上直接新增頁面上去,之前地圖就有很多圓角設定,加上cell上的圓角,會造成gpu效能的損耗,所以相對來說頁面的滑動會損耗gpu啦。 於是回到了老生常談的問題了,關於圓角的優化。 之前看文章有說這樣去優化:

+ (void)cutradiouswithview:(uiview *)view radious:(cgfloat)radious 

複製**

然而發現並沒有什麼用,其實mask遮罩還是會發生離屏渲染的。而且親測這樣的fps貌似更低???(黑人問號臉)

圓角優化

+ (uiimage *)cutcircleimagewithimage:(uiimage *)image size:(cgsize)size radious:(cgfloat)radious 

複製**

用這個方法可以得到新的,對於的圓角處理可以這樣做,但是對於view的呢?

view圓角優化

+ (void)cutcicleviewwithview:(uiview *)view radious:(cgfloat)radius 

複製**

相信學過演算法的同學都知道,越快的演算法,可能空間複雜度越高。當你為了某一效能去優化,必然會損耗其他的效能,所謂的演算法優化是為了達到最佳實現效果。所以這樣優化gpu的結果就是會損耗cpu。 過早的優化是魔鬼,但是到問題出來的時候 ,有些東西就有必要去做了!

android頁面卡頓

安卓手機應用中介面切換卡頓和滑動卡頓的區別是什麼,請從專業角度解釋?或者給出乙個開發者需要注意事項?於是直接貼我的答案 不過需要注意的是,我舉的例子並不是完備的。而且答題時間有限,而我打字有點慢.所以如果有錯也別打我oaq 另外 本答案基本基於 google 的 android開發指導。在andro...

iOS APP卡頓優化

on screen rendering 當前螢幕渲染,在當前用於顯示的螢幕緩衝區進行渲染操作 off screen rendering 離屏渲染,在當前螢幕緩衝區以外開闢乙個新的緩衝區進行渲染操作 需要建立新的緩衝區 離屏渲染的整個過程,需要多次切換上下文環境,先試從當前螢幕 on screen 切...

iOS 卡頓優化

卡頓優化 卡頓主要是在主線程執行了比較耗時的操作。cpu central processing unit,處理器 負責,物件的建立和銷毀 物件屬性的調整 布局計算 文字的計算和排版 的格式轉換和解碼 影象的繪製 co re graphics gpu graphics processing unit,...