示例瀑布图
共用的示例瀑布图与实用示例。
单一情境
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，只表示绘图几何。请以文字说明依赖关系；装饰性长条对辅助技术隐藏。容器较窄时，标签会堆叠在各轨道上方。请参阅关键资源。 瀑布图查看页呈现当前的请求顺序图。