[web_benchmarks] record Flutter frame timings with benchmark runs #151551
Description
Flutter has a FrameTiming API which is used across Dart / Flutter tooling to measure Flutter rendering performance. This data would be useful for the web_benchmarks package to record with each benchmark run so that the performance data is easy to consume in Flutter-specific terminology, vs Chrome-specific data. All our docs and tools use the concepts of "UI time" (build time) and "Raster time" to describe the performance of a Flutter frame, and we can look at these metrics in combination with total frame time to look for things like GPU back pressure or see latency between the Build and Raster threads.
Example FrameTiming event:
{
"number": 2,
"startTime": 713834379092,
"elapsed": 1730039,
"build": 1709331,
"raster": 20276,
"vsyncOverhead": 252
}
With this data, we could generate meaningful analyses for the user that matches their understanding (as well as our docs and tools) of Flutter rendering performance:
Frame count: 45
Wall time: 0:00:13.412074
totalTime
p50 10.62
p90 477.03
p95 1018.33
p99 1727.54
buildDuration
p50 1.71
p90 453.17
p95 983.23
p99 1636.99
rasterDuration
p50 7.08
p90 37.80
p95 39.83
p99 90.55
When compared to the existing output of the web_benchmarks package, the former will have more meaning to the user, and will require less understanding of Chrome-specific performance metrics:
Existing output of a benchmark run with package:web_benchmarks
"some_benchmark_run": [
{
"metric": "drawFrameDuration.average",
"value": 3000.380073800738
},
{
"metric": "drawFrameDuration.outlierAverage",
"value": 41412.3125
},
{
"metric": "drawFrameDuration.outlierRatio",
"value": 13.80235552875835
},
{
"metric": "drawFrameDuration.noise",
"value": 0.5990089334961862
},
{
"metric": "preroll_frame.average",
"value": 122.35740072202167
},
{
"metric": "preroll_frame.outlierAverage",
"value": 360
},
{
"metric": "preroll_frame.outlierRatio",
"value": 2.942200454371109
},
{
"metric": "preroll_frame.noise",
"value": 0.5008501865465637
},
{
"metric": "apply_frame.average",
"value": 620.9572953736655
},
{
"metric": "apply_frame.outlierAverage",
"value": 4499.833333333333
},
{
"metric": "apply_frame.outlierRatio",
"value": 7.246606758401198
},
{
"metric": "apply_frame.noise",
"value": 0.7276388496765184
},
{
"metric": "totalUiFrame.average",
"value": 21327
}
]