데모 워터폴
공유 데모 워터폴과 실용적인 예제입니다.
하나의 시나리오
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 사이이며 그림의 기하만 나타냅니다. 의존 관계를 말로 설명하고 장식용 막대는 보조 기술에서 숨기세요. 좁은 컨테이너에서는 레이블이 각 트랙 위로 쌓입니다. 핵심 리소스를 참고하세요. 워터폴 검토 페이지에서 현재 요청 순서 그림을 확인할 수 있습니다.