Definition of Hitches

Simply put, drop frames. Render Loop did not prepare a frame within the specified time. Take iOS as an example, 60 frames per frame in 1 second is 16.67ms. If no frame is prepared within 16.67ms, it will stall once.

The total Hitch time ratio is the total Hitch time in an interval divided by its duration.

  • The < 5 ms/s is good
  • [5ms/s, 10ms/s] Medium
  • 10 ms/s, is serious

IOS view rendering process

Commit Phase

  • It is subdivided into four stages

    • Layout Phase: Layout view. Related methods: layoutSubviews, setNeedsLayout, layoutIfNeesed.
    • The display phase: drawReact
    • Prepare Phase: Undecoded images are decoded in this phase. Note: decoding of large images takes a long time.
    • Commit Phase: Package the commit to the render service

  • Find hitches with Instruments

    • Open Hitches Instrument, operate app normally, and select a hitch to check the method time.
    • Optimizing time-consuming code
    • Repeat ~

  • recommendations

    • Lazy loading, heavy view in use before loading, to avoid waste.
    • Choose a lightweight view, try to use CALayer attributes to achieve UI effects;
    • Minimize adding and removing operations. You can use Hidden to achieve the same effect;
    • Do not use drawReact. It consumes a certain amount of time and memory resources.
    • Do not call layoutIfNeeded; Views that need to be laid out are marked with a call to setNeedesLayout;
    • Don’t add or remove constraints too often.

Render Phase

  • Two phases

    • render prepare. The render prepare phase is where our layer tree is compiled down into a pipeline of simple operations for the GPU to execute. Animations which take place over a couple of frames are also handled here.
    • render execute. During the render execute phase, the GPU draws the app’s layers into a final image ready to be displayed. Either of these phases could delay the frame’s delivery time. Common problem: off-screen rendering

  • An off-screen render scene appears

    • shadowing
    • masking
    • rounded rectangles (mayber)
    • Visual effects

  • Find hitches with Instruments

    • Instruments Hitches, Render Count Views the number of off-screen renders
    • Xcode View Debugger
      • Editor -> show layers Select a layer to view the number of Offscreens and the reasons.
      • Editor -> show Optimization Opportunities

  • recommendations

    • Use shadowPath to set shadows.
    • CornerRadius does not use maskToBounds (subview not over View) > maskToBounds > Mask layer

To optimize the practice

Lazy load

UITableViewCell, UICollectionViewCell views that are only displayed under certain conditions need to be considered lazy loading. You need to pay special attention to heavy Views (such as Lottie)

Layout

  • Do not call layoutIfNeeded
  • sizeToFit,  IntrinsicContentSize: Evaluating the text height is time consuming and should not be called.The child thread can calculate the text height, the main thread directly used.
  • Don’t add and remove views too often. Hidden is lighter;
  • Do not frequently delete, add, or update constraints;

Rounded corners

  • Add rounded corners in the appropriate way
  • CornerRadius does not use maskToBounds (subview not over view) > maskToBounds > mask layer

Iconfont

  • Caches images generated by iconFONT in scenarios where colored iconfont is frequently used.
  • Iconfont recommends using rich text

Obtaining Configuration Information

  • Consider experiment, configuration, and NSUserDefault read time. Frequently invoked scenarios (sliding, card update data) are saved with attributes to avoid being called every time.

data

Explore UI animation hitches and the render loop

Find and fix hitches in the commit phase

Demystify and eliminate hitches in the render phase High Performance Auto Layout