tezvyn:

Diagnose dropped frames during animation

AI-drafted, machine-checkedSource: interviewadvanced
WHAT IT TESTS

Profiling rendering with Instruments and fixing GPU hot spots.

OUTLINE

Use Core Animation and color-debug options to spot off-screen passes, blending, and overdraw; cache, flatten, and set shadowPath.

WHAT THIS TESTS This assesses whether you can methodically diagnose rendering performance with Apple's tooling and connect specific symptoms to specific fixes, rather than optimizing by superstition.

A GOOD ANSWER COVERS Profile with Instruments using the Core Animation template, or the newer Animation Hitches and Time Profiler combination, to see frame timing and GPU cost. On device you enable the color debug options: Color Offscreen-Rendered Yellow flags layers that force an off-screen pass, Color Blended Layers shows red where translucency forces blending, and Color Hits Green and Misses Red evaluates rasterization caching. Off-screen rendering is triggered by masking, by shadows computed without an explicit shadowPath, by cornerRadius with masksToBounds, and by some group opacity. Excessive blending comes from non-opaque layers stacked over each other. Resolve by giving shadows a shadowPath, marking views isOpaque with solid backgrounds, flattening static content into a single cached image, and reducing layer and subview count.

COMMON WRONG ANSWERS Saying you would just use Time Profiler, which shows CPU but misses GPU rendering cost. Applying shouldRasterize everywhere, which can hurt when content changes each frame because the cache misses constantly. Guessing the cause without enabling the color overlays.

LIKELY FOLLOW-UPS When shouldRasterize helps versus hurts, and the rasterizationScale gotcha that causes blurriness on Retina. How shadowPath avoids an off-screen pass. Why drawing text or gradients can be expensive and how layer-backed caching helps. Distinguishing CPU-bound layout from GPU-bound rendering.

ONE CONCRETE EXAMPLE You profile a scrolling feed and Color Offscreen-Rendered Yellow lights up every card. The cards use cornerRadius with masksToBounds plus a shadow. You set an explicit shadowPath and move clipping to a backing image, the yellow disappears, and the frame rate returns to 60. Then Color Blended Layers shows red over labels with clear backgrounds; you set their backgroundColor and isOpaque, removing blending, and the scroll becomes smooth.

Read the original → developer.apple.com

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.