Web性能分析

Debug performance for web apps

性能评估chevron_rightDebug performance for web apps

info提示

Profiling Flutter web apps requires Flutter version 3.14 or later.

The Flutter framework emits timeline events as it works to build frames, draw scenes, and track other activity such as garbage collections. These events are exposed in the Chrome DevTools performance panel for debugging.

info提示

For information on how to optimize web loading speed, check out the (free) article on Medium, Best practices for optimizing Flutter web loading speed.

You can also emit your own timeline events using the dart:developer Timeline and TimelineTask APIs for further performance analysis.

Optional flags to enhance tracing

#

To configure which timeline events are tracked, set any of the following top-level properties to true in your app's main method.

• debugProfileBuildsEnabled: Adds Timeline events for every Widget built.
• debugProfileBuildsEnabledUserWidgets: Adds Timeline events for every user-created Widget built.
• debugProfileLayoutsEnabled: Adds Timeline events for every RenderObject layout.
• debugProfilePaintsEnabled: Adds Timeline events for every RenderObject painted.

Instructions

#

1. [Optional] Set any desired tracing flags to true from your app's main method.
2. Run your Flutter web app in profile mode.
3. Open up the Chrome DevTools Performance panel for your application, and start recording to capture timeline events.