CADisplayLink - FPSMonitor

一、Outline

本文将尝试从以下3个方面向你介绍CADisplayLink

  1. 从文档开始,了解CADisplayLink相关属性和方法
  2. 开始上手,使用CADisplayLink开发一个FPS监测工具
  3. 总结,遇到的问题

二、CADisplayLink官方文档

A timer object that allows your application to synchronize its drawing to the refresh rate of the display.

按苹果的文档,CADisplayLink 一个计时器对象,它允许你的应用将其图形绘制与显示的刷新率同步。(真拗口。。。)换句话讲,这个定时器对象,在每次屏幕刷新时都会回调一次。

三、Functions

init(target: Any,  selector sel: Selector)

构造一个CADisplayLink实例,传入 targetselector, 注意CADisplayLinktarget是强引用。

func add(to runloop: RunLoop,  forMode mode: RunLoop.Mode)

在Runloop上, 以指定的 RunLoop.Mode 注册 CADisplayLink

func remove(from runloop: RunLoop,  forMode mode: RunLoop.Mode)

从Runloop上, 以指定的 RunLoop.Mode 移出 CADisplayLink

func invalidate()

作废当前CADisplayLink, 调用此方法会移出Runloop 上所有已注册的Mode的 CADisplayLinkCADisplayLink会释放强引用的target. 此方法线程安全,意味着你直接可以在子线程调用这个方法。

四、Properties

var duration: CFTimeInterval { get }

每帧之间的时间间隔。 只读。例如iPhone现在每秒刷新60次,那么这个值就是 1000ms/60 = 16.7ms

var preferredFramesPerSecond: Int { get set }

设置帧率/s, 如 15帧/s , 30帧/s
默认值为0, 当默认值时,帧率为屏幕的最大刷新率, 当前的iOS设备为60,以后iPhone有高刷版本时候,默认就是90,120.

var isPaused: Bool { get set }

是否暂停。 true时表示 暂停调用 targetselector。默认 false。线程安全。

var timestamp: CFTimeInterval { get }

上一帧渲染完成时间

var targetTimestamp: CFTimeInterval { get }

下一帧渲染完成时间,正常情况下,应该比 timestamp16.7ms

我可以使用这个值,取消或暂停一些耗时的操作。下面是一个例子,对一组数字求平方根,再对结果求和, 如果计算需要的时间过大,那么取消操作。

func createDisplayLink() {
    let displayLink = CADisplayLink(target: self, selector: #selector(step))
    displayLink.add(to: .main, forMode: .default)
}
    
func step(displayLink: CADisplayLink) {

    var sqrtSum = 0.0
    for i in 0 ..< Int.max {
        sqrtSum += sqrt(Double(i))
        //完成计算后,比较时间是否超过targetTimestamp, 
        if (CACurrentMediaTime() >= displayLink.targetTimestamp) {
            // 如果特别耗时,则退出
            print("break at i =", i)
            break
        }
    }
}

五、应用场景

  1. 适合做UI的不停重绘,过渡相对流畅,无卡顿感
    CADisplayLink得益于和显示器刷新率同频的特性,我们在它的回调内做绘制,动画将是相当顺滑,用户不会感知到任何卡顿。 弹幕效果,和水波纹动画都可以使用CADisplayLink成本较低得实现。

    水波纹

  2. 非UI更新的场景,比如实现音量EasyIn、EasyOut效果
    音乐播放类App在音乐切换时,平滑降低上一首音量,再平滑提高下一首音量,利用CADisplayLink的特性可以平滑实现相应的曲线效果。

六、FPSMonitor - FPS监测工具

FPS是应用程序用户体验考察的一个重要指标。FPS低于50,页面会出现卡顿,45以下会出现明显的卡顿,影响用户体验。日常开发工作中,在复杂Tableview视图等场景下,时常会出现页面卡顿,因此,有必要开发一个小工具,在产品回归测试阶段,做一次FPS检查。当然日后我们也会将这个 FPSMonitor 作为App debug工具一个常用子模块。

需求:

求一秒内页面帧数

已知:

  1. CADisplayLink 每秒默认刷新60次
  2. 如果出现掉帧,那么一秒内刷新将少于60次

思路:

  1. CADisplayLink 刷新时,记录一次时间timestamp;
  2. 计数:统计CADisplayLink 刷新次数;
  3. 每次刷新时,用当前硬件时间, 和之前记录的timestamp想比较,用以计算时差;
  4. 当 时差大于1时,计算一次FPS,那么 FPS = 刷新次数 / 时差

Code

见文末

使用

fpsMonitor.delegate = self
fpsMonitor.startMonitoring(inRunLoop: .main, mode: .default)

七、遇到哪些问题

问题1:页面滑动时,selector不再被调用

原因:iOS处理滑动时,RunloopUIScrollViewmode.eventTracking,会优先保证界面流畅,而 displaylink & timer 默认的 model.default,所以会出现被暂停。
解决办法:将 timer | displaylink 加到 .commen mode

回答为什么加到.commen之后就可以了,涉及到Runloop相关知识,这里就不展开了。大家可以参考耀总博文:深入理解RunLoop

问题2:循环引用问题

在OC中我们可以使用NSProxy转发消息,但是由于NSProxy是抽象类,在Swift中只能被继承而无法被实例化,我在FPSMonitor申明了一个内部类MonitorWeakProxy用来转发 CADisplayLink 中到 target的消息。

    fileprivate class MonitorWeakProxy: NSObject {
        
        weak var parentMonitor: FPSMonitor?
        
        @objc func updateFromDisplayLink(_ displayLink: CADisplayLink) {
            
            parentMonitor?.updateFromDisplayLink(displayLink)
        }
    }

如图:

FPSMonitor --strong--> CADisplayLink --strong--> Proxy --weak--> FPSMonitor

MonitorWeakProxy始终weak持有FPSMonitor的实例,从而打破引用链,避免循环引用。

图解

代码:

//
//  FPSMonitor.swift
//  FPSMonitor
//
//  Created by Halley on 3/28/21.
//

import Foundation
import UIKit

open class FPSMonitor: NSObject {
    
    private var displayLink: CADisplayLink
    private var runloop: RunLoop?
    private var mode: RunLoop.Mode?
    
    private var lastUpdateTime: CFTimeInterval = 0.0
    private var numberOfFrames = 0
    
    public var updateDelay: TimeInterval = 1.0
    public weak var delegate: FPSMonitorDelegate?
    
    override init() {
        
        let monitorWeakProxy = MonitorWeakProxy()
        displayLink = CADisplayLink(target: monitorWeakProxy, selector: #selector(MonitorWeakProxy.updateFromDisplayLink(_:)))
        
        super.init()
        monitorWeakProxy.parentMonitor = self
    }
    
    public func startMonitoring(inRunLoop runloop: RunLoop = .main, mode: RunLoop.Mode = .common) {
        
        stopMonitoring()
        
        self.runloop    = runloop
        self.mode       = mode
        displayLink.add(to: runloop, forMode: mode)
    }
    
    public func stopMonitoring() {
        
        guard let runloop = self.runloop, let mode = self.mode else { return }
        
        displayLink.remove(from: runloop, forMode: mode)
        self.runloop    = nil
        self.mode       = nil
    }
    
    private func updateFromDisplayLink(_ displayLink: CADisplayLink) {
    
        if lastUpdateTime == 0.0 {
            
            lastUpdateTime = CACurrentMediaTime()
            return
        }
        
        numberOfFrames += 1
        
        let currentTime     = CACurrentMediaTime()
        let timeInterval    = currentTime - lastUpdateTime
        
        if timeInterval >= self.updateDelay {
            
            notifyUpdateForTimeInterval(timeInterval)
            lastUpdateTime  = 0.0
            numberOfFrames  = 0
        }
    }
    
    private func notifyUpdateForTimeInterval(_ timeInterval: CFAbsoluteTime) {
        
        let fps = round(Double(self.numberOfFrames) / timeInterval)
        self.delegate?.fpsMonitor(self, didUpdateFramesPerSecond: Int(fps))
    }
    
    fileprivate class MonitorWeakProxy: NSObject {
        
        weak var parentMonitor: FPSMonitor?
        
        @objc func updateFromDisplayLink(_ displayLink: CADisplayLink) {
            
            parentMonitor?.updateFromDisplayLink(displayLink)
        }
    }
}

public protocol FPSMonitorDelegate: NSObjectProtocol {
    
    func fpsMonitor(_ counter: FPSMonitor, didUpdateFramesPerSecond fps: Int)
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容