ナビゲーション

ドキュメント

ベンチマークデータテーブル

共通のベンチマークデータテーブルと実用例。

記録済みの出力

Recorded CSS output測定結果の全項目
Use arrow keys to scroll the table.
FixtureVariantRaw CSSGzipBrotliSamples
DocumentationStatic56.2 kB6.8 kB5.1 kB10
DocumentationRuntime32.4 kB4.9 kB3.7 kB10
DashboardStatic104.8 kB13.2 kB9.4 kB10

完全なチャート表示

説明用データです。実測ベンチマークは製品のリンク先を参照してください。

FixtureCSS (kB)Samples
Fixture A18.410
Fixture B21.810
Fixture C34.210
Fixture D38.610

使用箇所: ベンチマーク.

使い方とインターフェース

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>

行と列の見出し、単位を残し、ゼロと欠測を区別してください。開閉にはマウス、タッチ、Enter、Space のネイティブ動作を使います。スクロール領域は WebKit でも矢印キーを一貫して処理します。JavaScript がなくても開閉領域と完全な表は利用でき、印刷では表全体を表示します。

チャートパターンの全体と実測ベンチマークのフィクスチャを参照してください。