iOS應用千萬級架構:性能優化與卡頓監控

CPU和GPU

在螢幕成像的過程中,CPU和GPU起著至關重要的作用

CPU(Central Processing Unit,中央處理器) 對象的創建和銷毀、對象屬性的調整、布局計算、文本的計算和排版、圖片的格式轉換和解碼、影像的繪製(Core Graphics)

GPU(Graphics Processing Unit,圖形處理器) 紋理的渲染

另:在iOS中是雙緩衝機制,有前幀快取、後幀快取

螢幕成像原理

GPU 通常有一個機制叫做垂直同步(簡寫也是 V-Sync),通常以固定頻率進行刷新,這個刷新率就是 VSync 訊號產生的頻率。CRT 的電子槍按照上面方式,從上到下一行行掃描,掃描完成後顯示器就呈現一幀畫面,隨後電子槍回到初始位置繼續下一次掃描。為了把顯示器的顯示過程和系統的影片控制器進行同步,顯示器(或者其他硬體)會用硬體時鐘產生一系列的定時訊號。當電子槍換到新的一行,準備進行掃描時,顯示器會發出一個水平同步訊號(horizonal synchronization),簡稱 HSync;

簡單來說,就是產生一個VSync,之後不斷的進行水平同步訊號HSync將螢幕顯示完,再產生下一個VSync,再不斷的進行水平同步訊號HSync將螢幕顯示完,重複這樣的操作。

按照60FPS的刷幀率,每隔16ms就會有一次VSync訊號。1秒是1000ms,1000/60 = 16。

卡頓的原因分析

此圖更為形象的反映了螢幕成像的原理流程是怎麼樣的。CPU計算顯示內容,例如視圖創建,布局計算、圖片解碼、文本繪製等;接著 CPU 會將計算好的內容提交到 GPU進行合成、渲染。隨後 GPU 會把渲染結果提交到幀緩衝區去,等待VSync 訊號到來時顯示到螢幕上。如果此時下一個VSync 訊號到來時,CPU或GPU都沒有完成相應的工作時,則那一幀將會丟失,則就是我們看到螢幕卡頓的原因。
  • 如圖第3步:VSync訊號回來時,GPU還沒有完成相應的工作,這一幀將會丟失
  • 如圖第4步:當第3步丟失了,可能會導致第4步操作缺失,這一步也會丟幀
所以說,卡頓造成的原因通常是CPU和GPU導致的掉幀引起的,主要原因如下:
  1. 主執行緒在進行大量I/O操作:為了方便程式碼編寫,直接在主執行緒去寫入大量數據;
  2. 主執行緒在進行大量計算:程式碼編寫不合理,主執行緒進行複雜計算;
  3. 大量UI繪製:介面過於複雜,UI繪製需要大量時間;
  4. 主執行緒在等鎖:主執行緒需要獲得鎖A,但是當前某個子執行緒持有這個鎖A,導致主執行緒不得不等待子執行緒完成任務。

卡頓優化

CPU資源消耗分析

1、對象創建:對象的創建會分配記憶體、調整屬性、甚至還有讀取文件等操作,比較消耗CPU資源。盡量採取輕量級對象,盡量放到後台執行緒處理,盡量推遲對象的創建時間。(如UIView / CALayer)

2、對象調整:frame、bounds、transform及視圖層次等屬性調整很耗費CPU資源。盡量減少不必要屬性的修改,盡量避免調整視圖層次、添加和移除視圖。

3、布局計算:隨著視圖數量的增長,Autolayout帶來的CPU消耗會呈指數級增長,所以盡量提前算好布局,在需要時一次性調整好對應屬性。

4、文本渲染:螢幕上能看到的所有文本內容控制項,包括UIWebView,在底層都是通過CoreText排版、繪製為點陣圖顯示的。常見的文本控制項,其排版與繪製都是在主執行緒進行的,顯示大量文本是,CPU壓力很大。對此解決方案唯一就是自定義文本控制項,用CoreText對文本非同步繪製。(很麻煩,開發成本高)

5、圖片解碼:當用UIImage或CGImageSource創建圖片時,圖片數據並不會立刻解碼。圖片設置到UIImageView或CALayer.contents中去,並且CALayer被提交到GPU前,CGImage中的數據才會得到解碼。這一步是發生在主執行緒的,並且不可避免。SD_WebImage處理方式:在後台執行緒先把圖片繪製到CGBitmapContext中,然後從Bitmap直接創建圖片。

6、影像繪製:影像的繪製通常是指用那些以CG開頭的方法把影像繪製到畫布中,然後從畫布創建圖片並顯示的一個過程。CoreGraphics方法是執行緒安全的,可以非同步繪製,主執行緒回調。

7、控制一下執行緒的最大並發數量

GPU資源消耗分析

1、紋理混合:盡量減少短時間內大量圖片的顯示,儘可能將多張圖片合成一張進行顯示。GPU能處理的最大紋理尺寸是4096x4096,一旦超過這個尺寸,就會佔用CPU資源進行處理,所以紋理盡量不要超過這個尺寸

2、視圖混合:盡量減少視圖層次和數量,減少透明的視圖(alpha<1),不透明的就設置opaque為YES。

3、圖形生成:盡量避免離屏渲染,盡量採用非同步繪製,盡量避免使用圓角、陰影、遮罩等屬性。必要時用靜態圖片實現展示效果,也可嘗試光柵化快取復用屬性。

什麼是離屏渲染?

在OpenGL中,GPU有2種渲染方式

  • On-Screen Rendering:當前螢幕渲染,在當前用於顯示的螢幕緩衝區進行渲染操作
  • Off-Screen Rendering:離屏渲染,在當前螢幕緩衝區以外新開闢一個緩衝區進行渲染操作

離屏渲染消耗性能的原因

  • 需要創建新的緩衝區
  • 離屏渲染的整個過程,需要多次切換上下文環境,先是從當前螢幕(On-Screen)切換到離屏(Off-Screen);等到離屏渲染結束以後,將離屏緩衝區的渲染結果顯示到螢幕上,又需要將上下文環境從離屏切換到當前螢幕

哪些操作會觸發離屏渲染?

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

卡頓檢測

原理

平時所說的「卡頓」主要是因為在主執行緒執行了比較耗時的操作,可以添加Observer到主執行緒RunLoop中,通過監聽RunLoop狀態切換的耗時,以達到監控卡頓的目的。 

其中核心方法CFRunLoopRun簡化後的主要邏輯大概是這樣的:

/// 1. 通知Observers,即將進入RunLoop
    /// 此處有Observer會創建AutoreleasePool: _objc_autoreleasePoolPush();
    __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__(kCFRunLoopEntry);
    do {
 
        /// 2. 通知 Observers: 即將觸發 Timer 回調。
        __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__(kCFRunLoopBeforeTimers);
        /// 3. 通知 Observers: 即將觸發 Source (非基於port的,Source0) 回調。
        __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__(kCFRunLoopBeforeSources);
        __CFRUNLOOP_IS_CALLING_OUT_TO_A_BLOCK__(block);
 
        /// 4. 觸發 Source0 (非基於port的) 回調。
        __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__(source0);

        /// 5. GCD處理main block
        __CFRUNLOOP_IS_CALLING_OUT_TO_A_BLOCK__(block);
 
        /// 6. 通知Observers,即將進入休眠
        /// 此處有Observer釋放並新建AutoreleasePool: _objc_autoreleasePoolPop(); _objc_autoreleasePoolPush();
        __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__(kCFRunLoopBeforeWaiting);
 
        /// 7. sleep to wait msg.
        mach_msg() -> mach_msg_trap();
 
        /// 8. 通知Observers,執行緒被喚醒
        __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__(kCFRunLoopAfterWaiting);
 
        /// 9. 如果是被Timer喚醒的,回調Timer
        __CFRUNLOOP_IS_CALLING_OUT_TO_A_TIMER_CALLBACK_FUNCTION__(timer);
 
        /// 9. 如果是被dispatch喚醒的,執行所有調用 dispatch_async 等方法放入main queue 的 block
        __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__(dispatched_block);
 
        /// 9. 如果如果Runloop是被 Source1 (基於port的) 的事件喚醒了,處理這個事件
        __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE1_PERFORM_FUNCTION__(source1);
 
 
    } while (...);
 
    /// 10. 通知Observers,即將退出RunLoop
    /// 此處有Observer釋放AutoreleasePool: _objc_autoreleasePoolPop();
    __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__(kCFRunLoopExit);
}
不難發現NSRunLoop調用方法主要就是在kCFRunLoopBeforeSources和kCFRunLoopBeforeWaiting之間,還有kCFRunLoopAfterWaiting之後,也就是如果我們發現這兩個時間內耗時太長,那麼就可以判定出此時主執行緒卡頓。

那麼,我們卡頓監控在 Runloop 的起始最開始和結束最末尾位置添加 Observer,從而獲得主執行緒的開始和結束狀態。卡頓監控起一個子執行緒定時檢查主執行緒的狀態,當主執行緒的狀態運行超過一定閾值則認為主執行緒卡頓,從而標記為一個卡頓。

分析實現

使用Runloop進行卡頓監控之後,需要定義一個閥值來判定卡頓的出現,並記錄下來,上報到伺服器

比如:

1、主程式 Runloop 超時的閾值是 2 秒,子執行緒的檢查周期是 1 秒。每隔 1 秒,子執行緒檢查主執行緒的運行狀態;如果檢查到主執行緒 Runloop 運行超過 2 秒則認為是卡頓,並獲得當前的執行緒快照。

2、假定連續5次超時50ms認為卡頓(當然也包含了單次超時250ms)

可參考的核心程式碼:

// 開始監聽
- (void)startMonitor {
    if (observer) {
        return;
    }
    
    // 創建訊號
    semaphore = dispatch_semaphore_create(0);
    NSLog(@"dispatch_semaphore_create:%@",[BGPerformanceMonitor getCurTime]);
    
    // 註冊RunLoop狀態觀察
    CFRunLoopObserverContext context = {0,(__bridge void*)self,NULL,NULL};
    //創建Run loop observer對象
    //第一個參數用於分配observer對象的記憶體
    //第二個參數用以設置observer所要關注的事件,詳見回調函數myRunLoopObserver中注釋
    //第三個參數用於標識該observer是在第一次進入run loop時執行還是每次進入run loop處理時均執行
    //第四個參數用於設置該observer的優先順序
    //第五個參數用於設置該observer的回調函數
    //第六個參數用於設置該observer的運行環境
    observer = CFRunLoopObserverCreate(kCFAllocatorDefault,
                                       kCFRunLoopAllActivities,
                                       YES,
                                       0,
                                       &runLoopObserverCallBack,
                                       &context);
    CFRunLoopAddObserver(CFRunLoopGetMain(), observer, kCFRunLoopCommonModes);
    
    // 在子執行緒監控時長
    dispatch_async(dispatch_get_global_queue(0, 0), ^{
        while (YES) {   // 有訊號的話 就查詢當前runloop的狀態
            // 假定連續5次超時50ms認為卡頓(當然也包含了單次超時250ms)
            // 因為下面 runloop 狀態改變回調方法runLoopObserverCallBack中會將訊號量遞增 1,所以每次 runloop 狀態改變後,下面的語句都會執行一次
            // dispatch_semaphore_wait:Returns zero on success, or non-zero if the timeout occurred.
            long st = dispatch_semaphore_wait(semaphore, dispatch_time(DISPATCH_TIME_NOW, 50*NSEC_PER_MSEC));
            NSLog(@"dispatch_semaphore_wait:st=%ld,time:%@",st,[self getCurTime]);
            if (st != 0) {  // 訊號量超時了 - 即 runloop 的狀態長時間沒有發生變更,長期處於某一個狀態下
                if (!observer) {
                    timeoutCount = 0;
                    semaphore = 0;
                    activity = 0;
                    return;
                }
                NSLog(@"st = %ld,activity = %lu,timeoutCount = %d,time:%@",st,activity,timeoutCount,[self getCurTime]);
                // kCFRunLoopBeforeSources - 即將處理source kCFRunLoopAfterWaiting - 剛從休眠中喚醒
                // 獲取kCFRunLoopBeforeSources到kCFRunLoopBeforeWaiting再到kCFRunLoopAfterWaiting的狀態就可以知道是否有卡頓的情況。
                // kCFRunLoopBeforeSources:停留在這個狀態,表示在做很多事情
                if (activity == kCFRunLoopBeforeSources || activity == kCFRunLoopAfterWaiting) {    // 發生卡頓,記錄卡頓次數
                    if (++timeoutCount < 5) {
                        continue;   // 不足 5 次,直接 continue 當次循環,不將timeoutCount置為0
                    }
                    
                    // 收集Crash資訊也可用於實時獲取各執行緒的調用堆棧
                    PLCrashReporterConfig *config = [[PLCrashReporterConfig alloc] initWithSignalHandlerType:PLCrashReporterSignalHandlerTypeBSD symbolicationStrategy:PLCrashReporterSymbolicationStrategyAll];
                    
                    PLCrashReporter *crashReporter = [[PLCrashReporter alloc] initWithConfiguration:config];
                    
                    NSData *data = [crashReporter generateLiveReport];
                    PLCrashReport *reporter = [[PLCrashReport alloc] initWithData:data error:NULL];
                    NSString *report = [PLCrashReportTextFormatter stringValueForCrashReport:reporter withTextFormat:PLCrashReportTextFormatiOS];
                    
                    NSLog(@"---------卡頓資訊\n%@\n--------------",report);
                }
            }
            NSLog(@"dispatch_semaphore_wait timeoutCount = 0,time:%@",[self getCurTime]);
            timeoutCount = 0;
        }
    });
}

也可以查看一個開源庫:LXDAppFluecyMonitor ,裡面有列印出堆棧資訊。

實際項目使用

當前,實際項目使用,是使用騰訊微信的開源庫,Matrix,說明wiki:Matrix-iOS 卡頓監控

上傳到伺服器之後,需要進行日誌符號化堆棧解析,可參考:iOS crash 日誌堆棧解析

解析成我們想要看懂的樣子,如:

主要分析一下最頂的主執行緒出現的卡頓位置,再結合程式碼去查看。