Optimizing iOS UI Smoothness: Hitch Detection and Performance Tuning for Feed and Article Pages

This article explores methods to enhance iOS application UI smoothness, focusing on reducing frame hitches in feed and article pages. With the introduction of 120Hz ProMotion displays, users are increasingly sensitive to rendering delays, making performance optimization critical.

Defining and Identifying Hitches: A hitch occurs when a frame misses its expected VSync signal, typically exceeding 16.67ms on standard 60Hz displays. Developers can use Xcode Instruments' Animation Hitches template to detect hitches and identify expensive commit phases. For fine-grained analysis, combining os_signpost with objc_msgSend hooking generates flame graphs that visually highlight performance bottlenecks. The Hitch ratio (ms/s) serves as a quantitative metric, with Apple recommending values below 5ms/s for optimal user experience.

Rich Text Optimization: Complex rich text parsing and drawing are primary causes of main thread blocking. By adopting DTCoreText, the parsing process is streamlined into a single-pass DOM tree generation with callback hooks, allowing asynchronous execution across multiple dispatch queues. For rendering, YYAsyncLayer is utilized to offload CoreText drawing to background threads. Additionally, configuring YYLabel's clearContentsBeforeAsynchronouslyDisplay property to NO prevents UI flickering during asynchronous reloads.

Constraint and View Management: Frequent remakeConstraints calls significantly impact performance. Instead of switching to frame-based layouts, the optimization introduces a diff-checking mechanism that only updates constraints when underlying model data actually changes. The implementation logic is as follows:

- (void)setTextColor:(UIColor *)textColor {
  if (!textColor) {
    textColor = [UIColor blackColor];
  }
  if (_textColor == textColor || [_textColor isEqual:textColor]) return;
  _textColor = textColor;
  _innerText.yy_color = textColor;
  if (_innerText.length && !_ignoreCommonProperties) {
    if (_displaysAsynchronously && _clearContentsBeforeAsynchronouslyDisplay) {
      [self _clearContents];
    }
    [self _setLayoutNeedUpdate];
  }
}

Furthermore, view creation overhead is minimized by reusing UIImageView instances for grid layouts and deferring lazy loading until components are strictly visible. The constraint update logic is implemented as:

- (void)setModel:(Model *)model
{
    BOOL needReLayoutViewX = [self measureRelayoutViewNecessary:model];
    if (needReLayoutViewX) {
        [self.viewX mas_remakeConstraints:^(MASConstraintMaker *make) {
            // 设置约束
        }];
    }
    _model = model;
}

- (BOOL)measureRelayoutViewNecessary:(Model *)model
{
    if (model && self.model && 'UI组件显示变更不满足') {
        return NO;
    }
    return YES;
}

Experimental Results: XCTest UI tests under extreme data conditions demonstrated substantial improvements. The feed page Hitch ratio on iPhone Xs dropped from 16ms/s to 3.5ms/s, while the article page on iPhone 6s improved from 60ms/s to 5.5ms/s. These optimizations effectively enhance perceived smoothness on both high-end and legacy devices.