Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Poor performance on mobile web #49

Open
Andreigr0 opened this issue Jun 9, 2021 · 5 comments
Open

[Bug] Poor performance on mobile web #49

Andreigr0 opened this issue Jun 9, 2021 · 5 comments

Comments

@Andreigr0
Copy link

Screen record https://photos.app.goo.gl/y7fdonK3epG4swJp7

Steps to reproduce

  1. Build example (I just changed item count from 6 to 200 on Loading List screen) for web using either html or canvaskit:
    flutter build web --web-renderer html or flutter build web --web-renderer canvaskit
    This could require to use example as a package itself
  2. Go to build folder: cd build/web
  3. Serve this folder: python -m http.server 8000
  4. Connect to your computer from your phone, e.g. something like 192.168.1.156:8000
  5. Go to Loading list
  6. See how FPS drops significantly but this is quite light screen

P.S. Maybe it's an issue of Flutter itself

@denisviana
Copy link

The same here

@jayjah
Copy link

jayjah commented Jul 29, 2021

Actually I think this is caused by a minor controller listener, which doesn't get disposed correctly. As I see you have many shimmer widgets in your list so I think this may be related to the problem I mentioned.

See this pull request #51

@Andreigr0
@denisviana
Please check if my pull request helps at these performance issues.
You can use that branch by the following override in you pubspec.yaml file:

dependency_overrides:
  flutter_shimmer:
    git:
      url: https://github.com/jayjah/flutter_shimmer.git
      ref: master

@XExistence
Copy link

Has anyone found a work around for this issue?

@mityax
Copy link

mityax commented Apr 17, 2022

I found the problem. It's caused by flutter's html renderer which is used by default on mobile browsers.

Building with flutter build web --web-renderer canvaskit fixes the issue by instructing flutter to use the canvaskit renderer on all devices.

Unfortunately, this increases download size on mobile devices by about 2 MB, but this trade-off was barely noticeable in my tests and is worth the improved performance in my eyes (performance improves overall, but most noticeably for this plugin).

@Andreigr0
@denisviana
@XSiyabonga


@jayjahI tried your proposal as well before finding this, but (at least for me) it didn't change anything noticeable, I'm afraid.

@hasanm08
Copy link

#75

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants