Cross-Platform Bridge Latency Simulator

Architecture

Workload

UI update rate 30 msg/s

Bridge serialization cost 2.0 ms

Target frame rate 60 fps

Live Readouts

Achieved FPS

60.0

Avg message latency

0.0 ms

Janky frames

Queue backlog

0 msg

How it works

A cross-platform mobile framework has two threads that must stay in sync: the JS/Dart logic thread that decides what the UI should look like, and the native thread that actually draws it. In a bridge architecture (classic React Native, Cordova/Ionic WebView) every UI update is serialized to JSON, queued, and deserialized on the other side — a real single-server queue:

M/D/1 queue, one server:
  λ  = message arrival rate   (UI update rate, msg/s)
  μ  = 1 / service_time       (service_time = serialization cost, s)
  ρ  = λ / μ = λ · service_time     (server utilization)
  Wq = ρ / (2μ(1-ρ))          (mean queueing delay, valid for ρ < 1)
  W  = Wq + 1/μ                (mean total latency)

Each message is served strictly FIFO: start = max(arrival, previous_completion), finish = start + service_time. As ρ → 1 the queue grows without bound and Wq diverges — that's visible here as messages piling up at the bridge gate and frames missing their budget.

A direct call path (Flutter's compiled Dart → its own Skia/Impeller renderer, or React Native's newer JSI which calls native functions synchronously with no serialization) has service_time near zero, so ρ stays low even at high update rates and the queue never forms.

UI update rate — how often the logic thread pushes a new frame's worth of UI changes (λ).
Bridge serialization cost — service time per message when routed through the bridge; ignored in Direct mode.
Target frame rate — the render budget (1000/fps ms); a frame is janky if the native thread's backlog delay exceeds that budget when the frame is due.

Real-world relevance: this queueing bottleneck is exactly why React Native introduced JSI/Fabric (bridgeless), and why Flutter — which compiles to native code and never crosses a message bridge for rendering — posts more consistent frame times under heavy UI churn.

Message packet Queued / waiting Rendered frame

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.