示範瀑布圖
共用的示範瀑布圖與實用範例。
單一情境
A dependency discovered later
The entry names the next resource after it loads.
- Entry
- Dependency
Illustrative order; positions are not milliseconds.
比較情境
兩張圖使用相同幾何與命名慣例。
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.
使用於 渲染模式指南.
用法與介面
DemoWaterfall 以文字說明與具名資源列呈現示意性的請求順序，不包含實測時間軸或動畫播放。選用標記可指出首次繪製等條件，但也須在圖說中解釋該條件。實測結果應使用基準測試元件。
<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' } ]}/>位置值介於 0 到 100，只表示繪圖幾何。請以文字說明相依關係；裝飾用長條對輔助科技隱藏。容器較窄時，標籤會堆疊在各軌道上方。請參閱關鍵資源。 瀑布圖檢視頁呈現目前的請求順序圖。