Flutter 的性能叠加层包可直接在应用界面中提供实时性能指标，例如帧率、内存使用情况和 CPU 负载。该工具设计用于跨所有平台（包括 Web）无缝工作，帮助开发人员在开发过程中识别并解决性能瓶颈。叠加层轻量且可配置，非常适合调试 UI 响应性和资源消耗。通过简单的 pub add 命令即可轻松集成，并支持多个目标平台。
适合场景
开发过程中的实时性能监控
识别帧率下降和渲染问题
优化网页应用的响应速度
调试内存和CPU使用情况
在不同设备上测试应用性能
在类似生产环境的环境中验证UI流畅性
主要特点
实时帧率和性能统计
跨平台支持，包括网页
使用 pub add 进行最小化设置
可配置的覆盖层外观
发布模式下无运行时开销
支持所有主要的Flutter平台
适合对象
Flutter 开发人员排查 UI 卡顿
构建以 Web 为优先的 Flutter 应用程序的团队
面向性能的应用优化
前端工程师测试响应式设计
移动和桌面应用程序开发人员
质量保证测试人员验证应用程序的稳定性
使用建议
生产构建中应禁用叠加层
在高负载使用期间可能轻微影响性能
不打算对最终用户可见
需要在应用入口点手动集成
布局的自定义选项有限
最适合在活跃的开发会话期间使用
原始 README
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
performance
Performance overlay for Flutter apps that works on web.
Reading the charts
You can read the charts in the performance overlay like this:
Every bar represents a single frame.
The height of each bar represents the total time it took to render the frame.
The line indicates the target frame time (e.g. 16ms for 60 FPS) and frames
that cross that line turn red.
The overlay is divided into three charts.
UI: the time it takes the UI to build.
Raster: the time it takes to rasterize the frame.
High latency: the total time between vsync start and raster finish, i.e. the
time it takes from an input to seeing the next frame.
The "max" value shows how long the worst sample in the displayed range took.
The "avg" value represents the average of all samples in the displayed range.
The displayed FPS value indicates the best logically possible number of
frames that could have been rendered per second. This might not be the actual
value, but the actual value is definitely not greater than this. This is
computed based on the average.
Limitations
The package is based on the FrameTiming API. Everything
documented there applies. This should correspond one to one with the values you
see in the framework performance overlay on mobile and on native desktop. So if
you like how this looks better, you can also use this package on mobile and
native desktop :)
On web, however, it shows somewhat limited data. This is because performance
data from the GPU on web is not available in the FrameTiming instances (which
would be part of the raster duration on native). What is included in the raster
duration on web are only parts of what is done on the GPU thread on native (due
to limitations on the web which require running the computations on the UI
thread).
If you want to access the GPU performance data, you can use Chrome DevTools or
chrome://tracing for example.
Repo structure
This repo currently contains the following packages:
