문서

벤치마크 데이터 표

공유 벤치마크 데이터 표와 실용적인 예제입니다.

기록된 출력

Recorded CSS output전체 측정 결과

Fixture	Variant	Raw CSS	Gzip	Brotli	Samples
Documentation	Static	56.2 kB	6.8 kB	5.1 kB	10
Documentation	Runtime	32.4 kB	4.9 kB	3.7 kB	10
Dashboard	Static	104.8 kB	13.2 kB	9.4 kB	10

완전한 차트 표현

컴포넌트 설명용 데이터입니다. 실측 벤치마크는 제품 링크를 참고하세요.

Fixture	CSS (kB)	Samples
Fixture A	18.4	10
Fixture B	21.8	10
Fixture C	34.2	10
Fixture D	38.6	10

사용 위치: 벤치마크.

사용법과 인터페이스

BenchmarkDataTable은 title과 children으로 완전한 네이티브 표를 받습니다. 네이티브 펼침 영역은 모든 행을 서버 렌더링 문서에 유지합니다. 안쪽의 이름이 있는 스크롤 영역은 키보드로 접근할 수 있고 넓은 열을 표 안에 제한합니다.

<BenchmarkDataTable title="All recorded measurements">  <table>    <thead><tr><th scope="col">Fixture</th><th scope="col">Median</th></tr></thead>    <tbody><tr><th scope="row">Illustrative fixture</th><td>12.5 ms</td></tr></tbody>  </table></BenchmarkDataTable>

행과 열 머리글 및 단위를 유지하고 0과 누락된 데이터를 구분하세요. 펼침은 마우스, 터치, Enter, Space의 네이티브 동작을 사용합니다. 스크롤 영역은 WebKit에서도 방향 키를 일관되게 처리합니다. JavaScript가 없어도 펼침 영역과 전체 표를 사용할 수 있으며 인쇄 시 전체 표가 표시됩니다.

전체 차트 패턴과 실측 벤치마크 픽스처를 참고하세요.