ベンチマークデータテーブル
共通のベンチマークデータテーブルと実用例。
記録済みの出力
Recorded CSS output
Use arrow keys to scroll the table.
| 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 |
完全なチャート表示
説明用データです。実測ベンチマークは製品のリンク先を参照してください。
使用箇所: ベンチマーク.
使い方とインターフェース
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 がなくても開閉領域と完全な表は利用でき、印刷では表全体を表示します。
チャートパターンの全体と実測ベンチマークのフィクスチャを参照してください。