mirror of https://github.com/flutter/samples.git
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>pull/2150/head
John Ryan
11 months ago
committed by
GitHub
parent
dc37f37b5c
commit
d96bb336b6
@ -0,0 +1,29 @@
|
|||||||
|
# Miscellaneous
|
||||||
|
*.class
|
||||||
|
*.log
|
||||||
|
*.pyc
|
||||||
|
*.swp
|
||||||
|
.DS_Store
|
||||||
|
.atom/
|
||||||
|
.buildlog/
|
||||||
|
.history
|
||||||
|
.svn/
|
||||||
|
migrate_working_dir/
|
||||||
|
|
||||||
|
# IntelliJ related
|
||||||
|
*.iml
|
||||||
|
*.ipr
|
||||||
|
*.iws
|
||||||
|
.idea/
|
||||||
|
|
||||||
|
# The .vscode folder contains launch configuration and tasks you configure in
|
||||||
|
# VS Code which you may wish to be included in version control, so this line
|
||||||
|
# is commented out by default.
|
||||||
|
#.vscode/
|
||||||
|
|
||||||
|
# Flutter/Dart/Pub related
|
||||||
|
# Libraries should not include pubspec.lock, per https://dart.dev/guides/libraries/private-files#pubspeclock.
|
||||||
|
/pubspec.lock
|
||||||
|
**/doc/api/
|
||||||
|
.dart_tool/
|
||||||
|
build/
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
# This file tracks properties of this Flutter project.
|
||||||
|
# Used by Flutter tool to assess capabilities and perform upgrades etc.
|
||||||
|
#
|
||||||
|
# This file should be version controlled and should not be manually edited.
|
||||||
|
|
||||||
|
version:
|
||||||
|
revision: "f5fb61b953a631f47191124a31169701911ee1f4"
|
||||||
|
channel: "main"
|
||||||
|
|
||||||
|
project_type: package
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
include: package:flutter_lints/flutter.yaml
|
||||||
|
|
||||||
|
# Additional information about this file can be found at
|
||||||
|
# https://dart.dev/guides/language/analysis-options
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
# Miscellaneous
|
||||||
|
*.class
|
||||||
|
*.log
|
||||||
|
*.pyc
|
||||||
|
*.swp
|
||||||
|
.DS_Store
|
||||||
|
.atom/
|
||||||
|
.buildlog/
|
||||||
|
.history
|
||||||
|
.svn/
|
||||||
|
migrate_working_dir/
|
||||||
|
|
||||||
|
# IntelliJ related
|
||||||
|
*.iml
|
||||||
|
*.ipr
|
||||||
|
*.iws
|
||||||
|
.idea/
|
||||||
|
|
||||||
|
# The .vscode folder contains launch configuration and tasks you configure in
|
||||||
|
# VS Code which you may wish to be included in version control, so this line
|
||||||
|
# is commented out by default.
|
||||||
|
#.vscode/
|
||||||
|
|
||||||
|
# Flutter/Dart/Pub related
|
||||||
|
**/doc/api/
|
||||||
|
**/ios/Flutter/.last_build_id
|
||||||
|
.dart_tool/
|
||||||
|
.flutter-plugins
|
||||||
|
.flutter-plugins-dependencies
|
||||||
|
.pub-cache/
|
||||||
|
.pub/
|
||||||
|
/build/
|
||||||
|
|
||||||
|
# Symbolication related
|
||||||
|
app.*.symbols
|
||||||
|
|
||||||
|
# Obfuscation related
|
||||||
|
app.*.map.json
|
||||||
|
|
||||||
|
# Android Studio will place build artifacts here
|
||||||
|
/android/app/debug
|
||||||
|
/android/app/profile
|
||||||
|
/android/app/release
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
# This file tracks properties of this Flutter project.
|
||||||
|
# Used by Flutter tool to assess capabilities and perform upgrades etc.
|
||||||
|
#
|
||||||
|
# This file should be version controlled and should not be manually edited.
|
||||||
|
|
||||||
|
version:
|
||||||
|
revision: "f5fb61b953a631f47191124a31169701911ee1f4"
|
||||||
|
channel: "main"
|
||||||
|
|
||||||
|
project_type: app
|
||||||
|
|
||||||
|
# Tracks metadata for the flutter migrate command
|
||||||
|
migration:
|
||||||
|
platforms:
|
||||||
|
- platform: root
|
||||||
|
create_revision: f5fb61b953a631f47191124a31169701911ee1f4
|
||||||
|
base_revision: f5fb61b953a631f47191124a31169701911ee1f4
|
||||||
|
- platform: android
|
||||||
|
create_revision: f5fb61b953a631f47191124a31169701911ee1f4
|
||||||
|
base_revision: f5fb61b953a631f47191124a31169701911ee1f4
|
||||||
|
- platform: ios
|
||||||
|
create_revision: f5fb61b953a631f47191124a31169701911ee1f4
|
||||||
|
base_revision: f5fb61b953a631f47191124a31169701911ee1f4
|
||||||
|
- platform: linux
|
||||||
|
create_revision: f5fb61b953a631f47191124a31169701911ee1f4
|
||||||
|
base_revision: f5fb61b953a631f47191124a31169701911ee1f4
|
||||||
|
- platform: macos
|
||||||
|
create_revision: f5fb61b953a631f47191124a31169701911ee1f4
|
||||||
|
base_revision: f5fb61b953a631f47191124a31169701911ee1f4
|
||||||
|
- platform: web
|
||||||
|
create_revision: f5fb61b953a631f47191124a31169701911ee1f4
|
||||||
|
base_revision: f5fb61b953a631f47191124a31169701911ee1f4
|
||||||
|
- platform: windows
|
||||||
|
create_revision: f5fb61b953a631f47191124a31169701911ee1f4
|
||||||
|
base_revision: f5fb61b953a631f47191124a31169701911ee1f4
|
||||||
|
|
||||||
|
# User provided section
|
||||||
|
|
||||||
|
# List of Local paths (relative to this file) that should be
|
||||||
|
# ignored by the migrate tool.
|
||||||
|
#
|
||||||
|
# Files that are not part of the templates will be ignored by default.
|
||||||
|
unmanaged_files:
|
||||||
|
- 'lib/main.dart'
|
||||||
|
- 'ios/Runner.xcodeproj/project.pbxproj'
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
include: package:flutter_lints/flutter.yaml
|
||||||
|
linter:
|
||||||
|
rules:
|
||||||
@ -0,0 +1,152 @@
|
|||||||
|
// 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:convert';
|
||||||
|
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:web_startup_analyzer/web_startup_analyzer.dart';
|
||||||
|
|
||||||
|
main() async {
|
||||||
|
var analyzer = WebStartupAnalyzer(additionalFrameCount: 10);
|
||||||
|
print(json.encode(analyzer.startupTiming));
|
||||||
|
analyzer.onFirstFrame.addListener(() {
|
||||||
|
print(json.encode({'firstFrame': analyzer.onFirstFrame.value}));
|
||||||
|
});
|
||||||
|
analyzer.onFirstPaint.addListener(() {
|
||||||
|
print(json.encode({
|
||||||
|
'firstPaint': analyzer.onFirstPaint.value?.$1,
|
||||||
|
'firstContentfulPaint': analyzer.onFirstPaint.value?.$2,
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
analyzer.onAdditionalFrames.addListener(() {
|
||||||
|
print(json.encode({
|
||||||
|
'additionalFrames': analyzer.onAdditionalFrames.value,
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
runApp(
|
||||||
|
WebStartupAnalyzerSample(
|
||||||
|
analyzer: analyzer,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
class WebStartupAnalyzerSample extends StatelessWidget {
|
||||||
|
final WebStartupAnalyzer analyzer;
|
||||||
|
const WebStartupAnalyzerSample({super.key, required this.analyzer});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return MaterialApp(
|
||||||
|
title: 'Flutter web app timing',
|
||||||
|
theme: ThemeData(
|
||||||
|
colorScheme: ColorScheme.fromSeed(seedColor: Colors.green.shade100),
|
||||||
|
useMaterial3: true,
|
||||||
|
),
|
||||||
|
home: WebStartupAnalyzerScreen(analyzer: analyzer),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class WebStartupAnalyzerScreen extends StatefulWidget {
|
||||||
|
final WebStartupAnalyzer analyzer;
|
||||||
|
|
||||||
|
const WebStartupAnalyzerScreen({super.key, required this.analyzer});
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<WebStartupAnalyzerScreen> createState() =>
|
||||||
|
_WebStartupAnalyzerScreenState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _WebStartupAnalyzerScreenState extends State<WebStartupAnalyzerScreen> {
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Scaffold(
|
||||||
|
backgroundColor: Colors.amber.shade50,
|
||||||
|
body: Align(
|
||||||
|
alignment: Alignment.topCenter,
|
||||||
|
child: Container(
|
||||||
|
margin: const EdgeInsets.all(8.0),
|
||||||
|
constraints: const BoxConstraints(maxWidth: 400),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Colors.white,
|
||||||
|
borderRadius: BorderRadius.circular(8.0),
|
||||||
|
),
|
||||||
|
child: ListenableBuilder(
|
||||||
|
listenable: widget.analyzer.onChange,
|
||||||
|
builder: (BuildContext context, child) {
|
||||||
|
return ListView(
|
||||||
|
shrinkWrap: true,
|
||||||
|
children: [
|
||||||
|
TimingWidget(
|
||||||
|
name: 'DCL',
|
||||||
|
timingMs: widget.analyzer.domContentLoaded,
|
||||||
|
),
|
||||||
|
TimingWidget(
|
||||||
|
name: 'Load entrypoint',
|
||||||
|
timingMs: widget.analyzer.loadEntrypoint,
|
||||||
|
),
|
||||||
|
TimingWidget(
|
||||||
|
name: 'Initialize engine',
|
||||||
|
timingMs: widget.analyzer.initializeEngine,
|
||||||
|
),
|
||||||
|
TimingWidget(
|
||||||
|
name: 'Run app',
|
||||||
|
timingMs: widget.analyzer.appRunnerRunApp,
|
||||||
|
),
|
||||||
|
if (widget.analyzer.firstFrame != null)
|
||||||
|
TimingWidget(
|
||||||
|
name: 'First frame',
|
||||||
|
timingMs: widget.analyzer.firstFrame!,
|
||||||
|
),
|
||||||
|
if (widget.analyzer.firstPaint != null)
|
||||||
|
TimingWidget(
|
||||||
|
name: 'First paint',
|
||||||
|
timingMs: widget.analyzer.firstPaint!),
|
||||||
|
if (widget.analyzer.firstContentfulPaint != null)
|
||||||
|
TimingWidget(
|
||||||
|
name: 'First contentful paint',
|
||||||
|
timingMs: widget.analyzer.firstContentfulPaint!),
|
||||||
|
if (widget.analyzer.additionalFrames != null) ...[
|
||||||
|
for (var i in widget.analyzer.additionalFrames!)
|
||||||
|
TimingWidget(name: 'Frame', timingMs: i.toDouble()),
|
||||||
|
] else
|
||||||
|
TextButton(
|
||||||
|
child: const Text('Trigger frames'),
|
||||||
|
onPressed: () {},
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class TimingWidget extends StatelessWidget {
|
||||||
|
final String name;
|
||||||
|
final double timingMs;
|
||||||
|
|
||||||
|
const TimingWidget({
|
||||||
|
super.key,
|
||||||
|
required this.name,
|
||||||
|
required this.timingMs,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return ListTile(
|
||||||
|
title: Text(
|
||||||
|
name,
|
||||||
|
style: const TextStyle(fontSize: 18),
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
),
|
||||||
|
trailing: Text(
|
||||||
|
'${timingMs.truncate()}ms',
|
||||||
|
style: const TextStyle(fontSize: 18),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
name: example
|
||||||
|
description: "flutter_web_startup_analyzer example"
|
||||||
|
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
|
||||||
|
version: 1.0.0+1
|
||||||
|
environment:
|
||||||
|
sdk: '>=3.4.0-16.0.dev <4.0.0'
|
||||||
|
dependencies:
|
||||||
|
flutter:
|
||||||
|
sdk: flutter
|
||||||
|
cupertino_icons: ^1.0.6
|
||||||
|
web_startup_analyzer:
|
||||||
|
path: ../
|
||||||
|
dev_dependencies:
|
||||||
|
flutter_test:
|
||||||
|
sdk: flutter
|
||||||
|
flutter_lints: ^3.0.0
|
||||||
|
flutter:
|
||||||
|
uses-material-design: true
|
||||||
|
After Width: | Height: | Size: 917 B |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 20 KiB |
@ -0,0 +1,50 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<base href="$FLUTTER_BASE_HREF">
|
||||||
|
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
|
||||||
|
<meta name="description" content="web_startup_analyzer example">
|
||||||
|
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
|
<meta name="apple-mobile-web-app-title" content="example">
|
||||||
|
<link rel="apple-touch-icon" href="icons/Icon-192.png">
|
||||||
|
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png"/>
|
||||||
|
|
||||||
|
<title>web_perf_metrics example</title>
|
||||||
|
<link rel="manifest" href="manifest.json">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const serviceWorkerVersion = null;
|
||||||
|
</script>
|
||||||
|
<script src="flutter.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script type="text/javascript" src="assets/packages/web_startup_analyzer/lib/web_startup_analyzer.js"></script>
|
||||||
|
<script>
|
||||||
|
var flutterWebStartupAnalyzer = new FlutterWebStartupAnalyzer();
|
||||||
|
var analyzer = flutterWebStartupAnalyzer;
|
||||||
|
|
||||||
|
window.addEventListener('load', function(ev) {
|
||||||
|
analyzer.markStart("loadEntrypoint");
|
||||||
|
_flutter.loader.loadEntrypoint({
|
||||||
|
serviceWorker: {
|
||||||
|
serviceWorkerVersion: serviceWorkerVersion,
|
||||||
|
},
|
||||||
|
onEntrypointLoaded: function(engineInitializer) {
|
||||||
|
analyzer.markFinished("loadEntrypoint");
|
||||||
|
analyzer.markStart("initializeEngine");
|
||||||
|
engineInitializer.initializeEngine().then(function(appRunner) {
|
||||||
|
analyzer.markFinished("initializeEngine");
|
||||||
|
analyzer.markStart("appRunnerRunApp");
|
||||||
|
appRunner.runApp();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
{
|
||||||
|
"name": "example",
|
||||||
|
"short_name": "example",
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "#0175C2",
|
||||||
|
"theme_color": "#0175C2",
|
||||||
|
"description": "A new Flutter project.",
|
||||||
|
"orientation": "portrait-primary",
|
||||||
|
"prefer_related_applications": false,
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "icons/Icon-192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "icons/Icon-512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "icons/Icon-maskable-192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "icons/Icon-maskable-512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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();
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
name: web_startup_analyzer
|
||||||
|
description: "Captures web startup timing data in a Flutter web app"
|
||||||
|
version: 0.1.0-wip
|
||||||
|
|
||||||
|
environment:
|
||||||
|
sdk: ^3.2.0
|
||||||
|
flutter: ^3.16.0
|
||||||
|
|
||||||
|
dependencies:
|
||||||
|
flutter:
|
||||||
|
sdk: flutter
|
||||||
|
|
||||||
|
dev_dependencies:
|
||||||
|
flutter_test:
|
||||||
|
sdk: flutter
|
||||||
|
flutter_lints: ^3.0.0
|
||||||
|
flutter:
|
||||||
|
assets:
|
||||||
|
- lib/web_startup_analyzer.js
|
||||||
Loading…
Reference in new issue