Skip to content
Marco Logo Marco Logo Marco

Draw Time Tracking

Marco tracks when UI components are drawn on screen by hooking into platform-specific lifecycle methods. This allows measuring the time between component creation in JavaScript and when it becomes visible to users, helping identify performance bottlenecks.

High-Level Architecture

The following diagram shows the core components involved in draw time tracking:

Diagram

Implementation Details

Marco uses different approaches for Android and iOS to detect when components are drawn on screen:

  • Android: Uses the onDraw() method of the PerformanceTrackerView class
  • iOS: Uses the didMoveToWindow() method when a view is added to the window hierarchy

Both implementations ensure minimal overhead by only tracking the first draw of components.

Detailed Component Interaction

The following diagram shows the complete flow of draw time tracking, from JavaScript initialization to final event handling:

Diagram