網站導覽
文件

圖表群組

共用的基準測試圖表群組與實用範例。

圖表群組

Compressed CSSBrotli · 10 samples · kB
Fixture A10 samples
18.4 kB
Fixture B10 samples
28.6 kB
Fixture Cno recorded output
0 kB

完整圖表呈現

這是元件示意資料，實測基準測試結果請前往產品連結。

Fixture Abaseline
18.4 kB
Fixture B+18%
21.8 kB
Fixture C1.9x
34.2 kB
Fixture D2.1x
38.6 kB

使用於 基準測試.

用法與介面

共用刻度上的數值使用 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.

Fixture Abaseline
18.4 kB
Fixture B+18%
21.8 kB
Fixture C1.9x
34.2 kB
Fixture D2.1x
38.6 kB
Illustrative values for the component.

Stacked payload bars

Each row fills its own width to show composition. Compare the printed totals to compare payload size.

Runtimefirst visit28.2 kB
  • CSS8.6 kB
  • Runtime JS14.2 kB
  • Manifest5.4 kB
Staticcached CSS18.4 kB
  • CSS18.4 kB
  • Runtime JS0 kB
  • Manifest0 kB
ProgressiveHTML response22.2 kB
  • CSS6.1 kB
  • Runtime JS14.2 kB
  • Hydration1.9 kB
Illustrative values and totals for the component.

Metric summary

Sample data for dense benchmark summaries.

Fixturedashboard
Median build148 ms

良好 10 measured rounds

Warm rebuild28 ms

良好 single class edit

Generated rules1,284

after pruning

Long tasks0

良好 Chromium trace sample

Readable labels and zero values

Labels wrap in the available column. A zero value has no colored fill.

Local traceIllustrative values · ms
A deliberately long scenario name that remains readable on a narrow screen3 samples
12.5 ms
No recorded work3 samples
0 ms
Illustrative measurements by fixture完整測量結果
Use arrow keys to scroll the table.
FixtureRaw CSSBrotli CSSBuild medianSamplesEnvironment
Fixture A100 kB18.4 kB148 ms10Illustrative local fixture
Fixture B100 kB21.8 kB148 ms10Illustrative local fixture
Fixture C100 kB34.2 kB148 ms10Illustrative local fixture
Fixture D100 kB38.6 kB148 ms10Illustrative local fixture

佐證資料See real benchmark sources (this date is illustrative)已記錄

Delta labels

Sample data for compact comparison badges.

-38%CSS bytes+12%build time+42 msstyle calcbaselinecurrent

Sample summary

Sample data for raw benchmark rounds.

Median16.8 ms
Mean17.1 ms
Min14.2 ms
Max22.4 ms
Samples25