How to write an effective TimerView in SwiftUI? - performance

Question

I wrote a simple timer view.
And I found it use 30% CPU on iPhone SE 2016 (or 12% CPU on Simulator.)
How to make a timer view with less CPU usage?
import SwiftUI
private var timer = Timer.publish (every: 0.01, on: .current, in: .common)
.autoconnect()
struct TimerView: View {
#State var time: TimeInterval = 0
var body: some View {
Text("\(time.description)")
.onReceive(timer) { time in
self.time = time.timeIntervalSinceReferenceDate
}
}
}
// Implementation in UIKit, 12% CPU Usage on iPhone SE 2016
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var label: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
let displaylink = CADisplayLink(target: self,
selector: #selector(updateLabel))
displaylink.add(to: .current,
forMode: RunLoop.Mode.default)
}
#objc func updateLabel(displaylink: CADisplayLink) {
self.label.text = "\(displaylink.targetTimestamp)"
}
}
SwiftUI TimelineView example, suggested by lorem ipsum.
// iOS 15 TimelineView, 22~25% CPU usage
import SwiftUI
struct TimerView2: View {
let step = 0.0166 // 1.0/60fps
var body: some View {
TimelineView(.periodic(from: .now, by: step)) { timeline in
Text("\(timeline.date.timeIntervalSinceReferenceDate)")
}
}
}

Answer 1

I tried to use UIViewRepresentable to wrap UILabel. CPU usage drop from 22-25% to 16-18% on iPhone SE 2016. I guess Text from SwiftUI did some additional things (ex: updating layout). So it is slower.
So compare to UIKit (render 60fps text)
4% CPU usage is added by SwiftUI Text
5% CPU usage is added by SwiftUI & TimelineView
import SwiftUI
import UIKit
struct TimerView3: View {
#State var text: String = ""
var body: some View {
TimelineView(.periodic(from: .now, by: 0.01667)) { timeline in
// CPU 12 - 13%
//MyCALabel(text: "\(timeline.date.timeIntervalSinceReferenceDate)")
// CPU 16 - 18%
//MyLabel(text: "\(timeline.date.timeIntervalSinceReferenceDate)")
// CPU 22 - 25%
//Text("\(timeline.date.timeIntervalSinceReferenceDate)")
}
}
}
struct MyCALabel: UIViewRepresentable {
var text: String
func makeUIView(context: Context) -> UIView {
let view = UIView()
let textLayer = CATextLayer()
textLayer.string = text
textLayer.fontSize = 24
textLayer.foregroundColor = UIColor.black.cgColor
view.layer.addSublayer(textLayer)
textLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
return view
}
func updateUIView(_ uiView: UIView, context: Context) {
if let textLayer = (uiView.layer.sublayers?[0]) as? CATextLayer {
textLayer.string = text
}
}
}
struct MyLabel: UIViewRepresentable {
var text: String
func makeUIView(context: Context) -> UIView {
let label = UILabel()
label.text = text
return label
}
func updateUIView(_ uiView: UIView, context: Context) {
if let label = uiView as? UILabel {
label.text = text
}
}
}