Documents

Delivery diagram

Resource order on one time axis, with the first-paint marker named.

One scenario

A dependency discovered later

The entry names the next resource after it loads.

  • Entry
  • Dependency
Illustrative order; positions are not milliseconds.

Compare scenarios

Both diagrams use the same geometry and naming conventions.

A dependency discovered later

The entry names the next resource after it loads.

  • Entry
  • Dependency
Illustrative order; positions are not milliseconds.

Both resources declared early

The document exposes both resources before either completes.

  • Entry
  • Dependency
Illustrative order; positions are not milliseconds.

Used on the Rendering modes guide.

Usage and interface

DemoWaterfall shows illustrative request order with a text description and labeled resource rows. It has no measured time scale or animated playback. An optional marker can identify a condition such as first paint; describe that condition in the caption. Keep measured results in the benchmark components.

<DemoWaterfall  title="A dependency discovered later"  description="The second request becomes known after the first resource loads."  rows={[    { label: 'Entry', start: 0, end: 40, tone: 'violet' },    { label: 'Dependency', start: 50, end: 90, tone: 'blue' }  ]}/>

Positions range from 0 to 100 and describe drawing geometry only. Use a description that explains the dependency in words; decorative bars are hidden from assistive technology. Rows stack their labels above the tracks in narrow containers. See critical resources. The waterfall review shows the current request-order diagram.