Add web startup analyzer to material 3 demo (#2144)

This adds a tool to measure web app startup for the Material 3 demo.

Demo:
- [Example app](https://flutter-web-perf-experiments.web.app/)
- [Material
3](https://flutter-web-perf-experiments--material3-vswzldcy.web.app/)
(open console)

---------

Co-authored-by: Brett Morgan <brett.morgan@gmail.com>
Co-authored-by: Kevin Moore <kevmoo@google.com>

web/_packages/web_startup_analyzer/lib/src/frame_analyzer.dart

@@ -0,0 +1,43 @@
+// Copyright 2021 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:async';
+
+import 'package:flutter/scheduler.dart';
+import 'package:flutter/widgets.dart';
+
+class FrameAnalyzer {
+  final WidgetsBinding _binding;
+  final Completer _onDone = Completer();
+  int _remainingFrames;
+
+  final int additionalFrames;
+  List<int> additionalFrameTimes = [];
+
+  FrameAnalyzer(this._binding, {this.additionalFrames = 10})
+      : _remainingFrames = additionalFrames;
+
+  Future captureAdditionalFrames() {
+    _binding.addTimingsCallback(_timingsCallback);
+    return _onDone.future;
+  }
+
+  _reportFrame(FrameTiming frameTiming) {
+    additionalFrameTimes.add(frameTiming.totalSpan.inMilliseconds);
+  }
+
+  _timingsCallback(timings) {
+    int i = 0;
+    while (_remainingFrames > 0 && i < timings.length) {
+      _reportFrame(timings[i]);
+      i++;
+      _remainingFrames--;
+    }
+    if (_remainingFrames <= 0) {
+      _binding.removeTimingsCallback(_timingsCallback);
+
+      _onDone.complete();
+    }
+  }
+}

web/_packages/web_startup_analyzer/lib/src/startup_analyzer.dart

@@ -0,0 +1,25 @@
+// Copyright 2021 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:js_interop';
+
+@JS()
+@staticInterop
+external FlutterWebStartupAnalyzer get flutterWebStartupAnalyzer;
+
+@JS()
+@staticInterop
+class FlutterWebStartupAnalyzer {
+  external factory FlutterWebStartupAnalyzer();
+}
+
+extension FlutterWebStartupAnalyzerExtensions on FlutterWebStartupAnalyzer {
+  external JSObject get timings;
+  external void markStart(String name);
+  external void markFinished(String name);
+  external void capture(String name);
+  external void captureAll();
+  external void capturePaint();
+  external void report();
+}

web/_packages/web_startup_analyzer/lib/web_startup_analyzer.dart

@@ -0,0 +1,97 @@
+// Copyright 2021 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:async';
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
+
+import 'package:flutter/widgets.dart';
+
+import 'src/frame_analyzer.dart';
+import 'src/startup_analyzer.dart';
+
+class WebStartupAnalyzer {
+  final WidgetsBinding _widgetsBinding;
+  late final FrameAnalyzer _frameAnalyzer;
+  List<int>? _additionalFrames;
+
+  late final Listenable onChange;
+  Map<String, dynamic> startupTiming = {};
+  ValueNotifier<double?> onFirstFrame = ValueNotifier(null);
+  ValueNotifier<(double, double)?> onFirstPaint = ValueNotifier(null);
+  ValueNotifier<List<int>?> onAdditionalFrames = ValueNotifier(null);
+
+  double get domContentLoaded =>
+      (flutterWebStartupAnalyzer.timings['domContentLoaded'] as JSNumber)
+          .toDartDouble;
+  double get loadEntrypoint =>
+      (flutterWebStartupAnalyzer.timings['loadEntrypoint'] as JSNumber)
+          .toDartDouble;
+  double get initializeEngine =>
+      (flutterWebStartupAnalyzer.timings['initializeEngine'] as JSNumber)
+          .toDartDouble;
+  double get appRunnerRunApp =>
+      (flutterWebStartupAnalyzer.timings['appRunnerRunApp'] as JSNumber)
+          .toDartDouble;
+  double? get firstFrame =>
+      (flutterWebStartupAnalyzer.timings['firstFrame'] as JSNumber?)
+          ?.toDartDouble;
+  double? get firstPaint =>
+      (flutterWebStartupAnalyzer.timings['first-paint'] as JSNumber?)
+          ?.toDartDouble;
+  double? get firstContentfulPaint =>
+      (flutterWebStartupAnalyzer.timings['first-contentful-paint'] as JSNumber?)
+          ?.toDartDouble;
+  List<int>? get additionalFrames => _additionalFrames;
+
+  WebStartupAnalyzer({int additionalFrameCount = 5})
+      : _widgetsBinding = WidgetsFlutterBinding.ensureInitialized() {
+    _frameAnalyzer =
+        FrameAnalyzer(_widgetsBinding, additionalFrames: additionalFrameCount);
+    _captureStartupMetrics();
+    startupTiming = {
+      'domContentLoaded': domContentLoaded,
+      'loadEntrypoint': loadEntrypoint,
+      'initializeEngine': initializeEngine,
+      'appRunnerRunApp': appRunnerRunApp,
+    };
+    _captureFirstFrame().then((value) {
+      flutterWebStartupAnalyzer.captureAll();
+      onFirstFrame.value = firstFrame;
+
+      // Capture first-paint and first-contentful-paint
+      Future.delayed(const Duration(milliseconds: 200)).then((_) {
+        flutterWebStartupAnalyzer.capturePaint();
+        onFirstPaint.value = (firstPaint!, firstContentfulPaint!);
+      });
+    });
+    captureFlutterFrameData().then((value) {
+      _additionalFrames = value;
+      onAdditionalFrames.value = value;
+    });
+    onChange =
+        Listenable.merge([onFirstFrame, onFirstPaint, onAdditionalFrames]);
+  }
+
+  _captureStartupMetrics() {
+    flutterWebStartupAnalyzer.markFinished('appRunnerRunApp');
+    flutterWebStartupAnalyzer.captureAll();
+  }
+
+  Future<void> _captureFirstFrame() {
+    final completer = Completer();
+    flutterWebStartupAnalyzer.markStart('firstFrame');
+    _widgetsBinding.addPostFrameCallback((timeStamp) {
+      flutterWebStartupAnalyzer.markFinished('firstFrame');
+      flutterWebStartupAnalyzer.capture('firstFrame');
+      completer.complete();
+    });
+    return completer.future;
+  }
+
+  Future<List<int>> captureFlutterFrameData() async {
+    await _frameAnalyzer.captureAdditionalFrames();
+    return _frameAnalyzer.additionalFrameTimes;
+  }
+}

web/_packages/web_startup_analyzer/lib/web_startup_analyzer.js

@@ -0,0 +1,47 @@
+// Copyright 2021 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Helper class to capture Flutter web app startup timing information
+class FlutterWebStartupAnalyzer {
+    timings;
+
+    constructor() {
+        this.timings = {};
+    }
+
+    markStart(name) {
+        this.timings[name] = null;
+        performance.mark('flt-' + name + '-started');
+    }
+    markFinished(name) {
+        performance.mark('flt-' + name + '-finished');
+    }
+    capture(name) {
+        var timingName = 'flt-' + name;
+        var started = 'flt-' + name + 'started';
+        try {
+            var measurement = performance.measure('flt-' + name, 'flt-' + name + '-started', 'flt-' + name + '-finished');
+        } catch(e) {
+            // ignore errors if the mark doesn't exist
+            return;
+        }
+        this.timings[name] = measurement.duration;
+    }
+    captureAll() {
+        for (var [key, value] of Object.entries(this.timings)) {
+            this.capture(key);
+        }
+        // Capture
+        this.timings['load'] = performance.timing.loadEventEnd - performance.timing.domContentLoadedEventEnd;
+        this.timings['domContentLoaded'] = performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart;
+    }
+
+    capturePaint() {
+        const entries = performance.getEntriesByType("paint");
+        // Collect first-paint and first-contentful-paint entries
+        entries.forEach((entry) => {
+            this.timings[entry.name] = entry.startTime;
+        });
+    }
+}