Skip to content

Consider adding Performance overlay to platform-web #52258

Open
Open
Consider adding Performance overlay to platform-web#52258
Labels
P2Important issues not at the top of the work listc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterframeworkflutter/packages/flutter repository. See also f: labels.platform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

Description

@filiph
filiph
opened on Mar 9, 2020

Note: I'm not sure how this would work or how much work this entails. But it came up as a topic from conversations with @liyuqian, and we noticed there is no bug tracking it.

Use case

  • Performance optimization: Running a Flutter app on the web and seeing some skipped frames, I'd like to reuse my knowledge of Flutter performance tools to start addressing the issue.
  • Education: Writing docs about performance, I'd like to give the users two version of an app in DartPad. Users are able to bring up the performance overlay to see how one version of the app is performing much faster than the other one.

Proposal

  • Enable the performance overlay for Flutter web apps.

For clarity, this is what I mean by performance overlay.

performance-overlay-green-bb41b466cf6bcd529b285e1510b638086fc5afb8921b8ac5a6565dee5bc44788

It is an engine layer added to a --profile (or --debug) version of an app by the engine. It shows the build times for the UI thread (a.k.a. main thread, app thread, etc.) and the GPU thread (a.k.a. raster thread -- i.e. not actually running on the GPU).

Activity

  1. filiph
    added
    platform-webWeb applications specifically
    on Mar 9, 2020
  2. ferhatb
    added this to the milestone on Mar 10, 2020
  3. kf6gpe
    added
    P1High-priority issues at the top of the work list
    on May 29, 2020
  4. yjbanov
    added
    P2Important issues not at the top of the work list
    and removed
    P1High-priority issues at the top of the work list
    on Jun 16, 2020
  5. iapicca
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    c: proposalA detailed proposal for a change to Flutter
    c: new featureNothing broken; request for a new capability
    on Jul 6, 2020
  6. kf6gpe
    modified the milestone: on Jul 7, 2020
  7. kf6gpe
    removed this from the milestone on Jul 22, 2020
  8. Hixie
    removed this from the milestone on Aug 17, 2020

  9. goncalo-palma-3r commented on Sep 14, 2020

    @goncalo-palma-3r
    goncalo-palma-3r
    on Sep 14, 2020

    Thumbed up, we desperately need that 🙏

  10. OldMetalmind commented on Sep 14, 2020

    @OldMetalmind
    OldMetalmind
    on Sep 14, 2020

    Working on flutter web. This would help!

  11. abid-shaon-3r commented on Sep 14, 2020

    @abid-shaon-3r
    abid-shaon-3r
    on Sep 14, 2020

    This would be very helpful for as

  12. ghunkins commented on Mar 24, 2021

    @ghunkins
    ghunkins
    on Mar 24, 2021

    Performance for Flutter web is very needed.

  13. ted-marozzi commented on Sep 27, 2021

    @ted-marozzi
    ted-marozzi
    on Sep 27, 2021

    This would be very useful

  14. creativecreatorormaybenot commented on Sep 27, 2021

    @creativecreatorormaybenot
    creativecreatorormaybenot
    on Sep 27, 2021
    Contributor

    Note that you can easily build your own performance overlay on web using the FrameTiming API.

    An example of what that looks like can be seen here. You can see the performance overlay in the top right:

    image

    If there is interest in such thing, I could create a similar overlay as a package.

  15. ted-marozzi commented on Sep 27, 2021

    @ted-marozzi
    ted-marozzi
    on Sep 27, 2021

    Note that you can easily build your own performance overlay on web using the FrameTiming API.

    An example of what that looks like can be seen here. You can see the performance overlay in the top right:

    image

    If there is interest in such thing, I could create a similar overlay as a package.

    Hey I would definitely be interested in this. Could you share some of the code in the demo that lead to that overlay in the mean time? Looking into the frame timing api. Very interesting. Seems like it wouldn't be too much work to integrate it into the actual flutter sdk though!

  16. creativecreatorormaybenot commented on Oct 30, 2021

    @creativecreatorormaybenot
    creativecreatorormaybenot
    on Oct 30, 2021
    Contributor

    I published the custom performance overlay for web as a package 🎉

    https://pub.dev/packages/performance

  17. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-webOwned by Web platform team
    triaged-webTriaged by Web platform team
    on Jul 8, 2023
  18. Hixie
    removed
    multiteam-retriage-candidate
    on Mar 6, 2024
  19. alexmarkov
    added a commit that references this issue on Oct 1, 2026

    [web] Unskip web tests that now pass in gestures, services, and widge…

    1ac920a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterframeworkflutter/packages/flutter repository. See also f: labels.platform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions