性能监控-①卡顿监控

卡顿监控

一、如何监控卡顿

那怎么监控应用的卡顿情况？通常有以下两种方案

FPS 监控：这是最容易想到的一种方案，如果帧率越高意味着界面越流畅，上文也给出了计算 FPS 的实现方式，通过一段连续的 FPS 计算丢帧率来衡量当前页面绘制的质量。

主线程卡顿监控：这是业内常用的一种检测卡顿的方法，通过开辟一个子线程来监控主线程的 RunLoop，当两个状态区域之间的耗时大于阈值时，就记为发生一次卡顿。美团的移动端性能监控方案 Hertz 采用的就是这种方式

主线程卡顿监控的实现思路：开辟一个子线程，然后实时计算 kCFRunLoopBeforeSources 和 kCFRunLoopAfterWaiting 两个状态区域之间的耗时是否超过某个阀值，来断定主线程的卡顿情况

其他参考文章：iOS 性能监控（二）—— 主线程卡顿监控

更详细内容推荐查看项目中md文档。

二、FPS

FPS”通常指的是”Frames Per Second”，即每秒传输帧数，用于衡量动画或视频渲染的性能。

一般情况下，我们的屏幕刷新率是 1/60s 一次。CADisplayLink 实际上跟平常用的 NSTimer 的用法基本相似，NSTimer 的时间间隔是以秒为单位，而 CADisplayLink 则是使用帧率来作为时间间隔的单位。

计算核心：CADisplayLink是一个能让我们以和屏幕刷新率相同的频率将内容画到屏幕上的定时器。

实践代码：CQDemoKit 的 CQTSFPSView.m

附：其他定时器

iOS：三种常见计时器（NSTimer、CADisplayLink、dispatch_source_t）的使用

1、NSTimer：进入后台时停止

iOS开发：解决App进入后台，倒计时（定时器）不能正常计时的问题

方法一（主流方法）：根据记录开始的时间和获取当前时间进行时间差操作进行处理。监听进入前台、进入后台的消息，在进入后台的时候存一下时间戳，停掉定时器(系统会强制停止定时器)；在再进入前台时，计算时间差。若剩余的时间大于时间差，就减去时间差，否则赋值剩余时间为0。

方法二：苹果只允许三种情况下的App在后台可以一直执行：音视频、定位更新、下载，若是直播、视频播放、地图类、有下载的应用可以这样使用，但是有些小需求就不需这样做。

方法三：通过向苹果的系统申请，在后台完成一个Task任务。

2、NSTimer：滑动时停止

《2内存-②循环引用Timer.md》中的【3、NSTimer和NSRunLoop的关系？】

Instrument

一、耗时/卡顿

卡顿的原因：

设备通常以60Hz的频率刷新屏幕，即每16.67毫秒刷新一次。如果在16.67ms内帧缓冲区没有准备好下一帧数据就会使画面停留在上一帧，造成丢帧，没法达到60fps，从而形成卡顿的现象。

每段16.67ms，其实是一个VSync信号，该信号用于保证只有在帧缓冲区中的图像被渲染之后，后备缓冲区中的内容才可以被拷贝到帧缓冲区中。

3视图-更新机制.md

在VSync信号到来后，系统图形服务通过CADisplayLink等机制通知App，App主线程开始在CPU中计算显示内容，包括视图的创建、布局计算、图片解码、文本绘制等。然后CPU将计算好的内容提交到GPU，由GPU进行变换、合成、渲染，并将渲染结果提交到帧缓冲区，等待下一次VSync信号到来时显示到屏幕上

iOS默认刷新频率是60HZ，所以GPU渲染只要达到60fps就不会产生卡顿。

只要能使CPU的计算和GPU的渲染能在规定时间内完成，就不会出现卡顿。所以目标是减少CPU和GPU的资源消耗。

卡顿造成的原因是CPU和GPU导致的掉帧引起的：

主线程在进行大量I/O操作：直接主线程写入大量数据
主线程进行大量计算：主线程进行大量复杂的计算
大量UI绘制：界面过于复杂，绘制UI需要大量的时间
主线程在等锁

iOS卡顿优化

https://github.com/dvlproad/CJOptimizeProject/blob/main/CJOptimizeProject/TSDemo_Optimize/FPS/TSOptimizeTableViewController.m

我们写个列表，计算高度时候模拟耗时，且加载图片时候不使用缓存。代码示例如下：

则经在Instrument中跑起来可查出耗时的位置即在上述①②。

点击进入也能看到详细的时间分布

二、Leak

https://github.com/dvlproad/CJOptimizeProject/blob/main/CJOptimizeProject/TSDemo_Optimize/Leak/TSLeakViewController.m

// 内存泄漏示例--循环引用导致的
- (void)leakMemoryCircularRreference:(UIButton *)button {
    //__weak typeof(self) weakSelf = self;
    //__strong __typeof(self) strongSelf = weakSelf;
    
    TSLeakViewController *viewController = [[TSLeakViewController alloc] init];
    if ([button.titleLabel.text containsString:@"会泄露"]) {
        viewController.leakBlock = ^(NSString * _Nonnull title) {
            viewController.title = title; // 会泄露
        };
    } else {
        __weak typeof(viewController) weakViewController = viewController;
        viewController.leakBlock = ^(NSString * _Nonnull title) {
            //self.title = title;   // 不会泄露
            weakViewController.title = title;   // 不会泄露，使得在 Block 中不会出现对 自身 的强引用
                       
           //__strong __typeof(viewController) strongViewController = weakViewController;
           //strongViewController.title = title;   // 不会泄露
        };
    }
    [self.navigationController pushViewController:viewController animated:YES];
}

ios Instruments之Allocations

ios_alloction_01

Flutter FPS

Widget buildList(BuildContext context) {
    return ListView.builder(
      itemCount: 1000,
      itemBuilder: (context, index) {
        preBuildItem(index); // 模拟耗时操作，例如使用延时

        int imageIndex = index % 10;
        String imageName = "assets/images/cqts_${imageIndex + 1}.jpg";
        return Container(
          color: index % 2 == 0 ? Colors.red : Colors.blue,
          child: Row(
            children: [
              JankText("Item $index"),
              Image(
                image: AssetImage(imageName),
                width: 100,
                height: 100,
              ),
            ],
          ),
        );
      },
    );