图表分组
共用的基准测试图表分组与实用示例。
图表分组
完整图表呈现
这是组件示意数据，实测基准测试结果请前往产品链接。
使用于 基准测试.
用法与接口
共用刻度上的数值使用 BenchmarkBars，每行的组成使用 BenchmarkStackedBars。行总量也需要共用刻度时，例如传输负载比较，请为堆叠图传入相同的 max。下方示例使用示意数据，不是实测结果。真实 fixtures、来源与限制请参阅基准测试。
BenchmarkChartGroup 将清晰的指标标题、单位与样本背景配在一起，同时保留既有条形呈现；当前标题可见于图表分组查看页。BenchmarkMetrics 使用优化后的定义列表呈现短摘要，数值采用等宽数字，补充说明会在窄列中移到下方；当前指标行可见于指标查看页。BenchmarkDataTable 使用优化后的原生折叠区域和具名、可通过键盘聚焦的滚动区域，让长表保留完整行与列；当前折叠区域可见于数据表查看页。BenchmarkSource 在记录日期旁标明已提交快照；来源查看页呈现当前的证据注记。BenchmarkFigure、BenchmarkDelta 和 BenchmarkSampleSummary 分别提供图注、附背景条件的差异及样本统计。
系列标签应保持可见，包含单位与样本数，并区分零值与缺失数据。标签可换行，数值使用等宽数字。零值没有填色。堆叠行按各自总量归一化，因此长度不能用于比较绝对负载大小。重要发现与限制应同时写在文档正文与图注中。
import BenchmarkChartGroup from '@master/internal-site/benchmarks/BenchmarkChartGroup.astro'import BenchmarkDataTable from '@master/internal-site/benchmarks/BenchmarkDataTable.astro'import BenchmarkSource from '@master/internal-site/benchmarks/BenchmarkSource.astro'<BenchmarkChartGroup title="Style recalculation" detail="Median · 3 samples" unit="ms" items={[{ id: 'fixture-a', label: 'Fixture A', value: 12.5, color: 'blue' }]} /><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">Fixture A</th><td>12.5 ms</td></tr></tbody> </table></BenchmarkDataTable><BenchmarkSource generatedAt="2026-07-01T00:00:00Z" href="https://rc.css.master.co/benchmarks#data-sources" />图表与摘要由服务器渲染，不会添加动画或改变测量值。表格只添加小型键盘处理程序，让方向键滚动在移动版 WebKit 等环境中保持一致；展开功能仍使用原生行为。每张图表使用同一单位的非负有限值，有正负号的变化则使用差异标签。max 小于条目数值会裁切视觉刻度，应避免使用。表格只可在自身区域中横向滚动，不可让文档整体滚动。
#完整图表模式
Ranking bars
Sample data for comparing one metric across fixtures. Bar lengths share a common zero and maximum.
Stacked payload bars
Each row fills its own width to show composition. Compare the printed totals to compare payload size.
- CSS8.6 kB
- Runtime JS14.2 kB
- Manifest5.4 kB
- CSS18.4 kB
- Runtime JS0 kB
- Manifest0 kB
- CSS6.1 kB
- Runtime JS14.2 kB
- Hydration1.9 kB
Metric summary
Sample data for dense benchmark summaries.
良好 10 measured rounds
良好 single class edit
after pruning
良好 Chromium trace sample
Readable labels and zero values
Labels wrap in the available column. A zero value has no colored fill.
Illustrative measurements by fixture
| Fixture | Raw CSS | Brotli CSS | Build median | Samples | Environment |
|---|---|---|---|---|---|
| Fixture A | 100 kB | 18.4 kB | 148 ms | 10 | Illustrative local fixture |
| Fixture B | 100 kB | 21.8 kB | 148 ms | 10 | Illustrative local fixture |
| Fixture C | 100 kB | 34.2 kB | 148 ms | 10 | Illustrative local fixture |
| Fixture D | 100 kB | 38.6 kB | 148 ms | 10 | Illustrative local fixture |
佐证资料See real benchmark sources (this date is illustrative)已记录
Delta labels
Sample data for compact comparison badges.
Sample summary
Sample data for raw benchmark rounds.