[web] App has performance issues

[ayazemre]

Hello,

I was revising my single page portfolio site in flutter. I have one old version running already with similar structure. When I run it on debug, release or profile mode everything is perfect. I get small stutters but that is okay. When I use build web for canvaskit it just weirdly drops performance. I made recordings and a sample web deploy for you to review. Sorry if this is a easy mistake but I followed same path for my previous web deploy and everything was okay.

This is normal debug mode:

debugmode.mp4

This is "flutter -run -d chrome --release" version:

releasemode_1.mp4

This is "flutter run --profile" version:

profilemode_1.mp4

and this is final "flutter build web --web-renderer canvaskit" version;

buildcanvaskit_1.mp4

you can find live version of site here also: https://personalwebsite-50c9c--lowperformanceproblem-f123attw.web.app

[TahaTesser]

Hi @ayazthemre
Can you please provide your flutter doctor -v & complete reproducible minimal code sample,
Thank you

[ayazemre]

Hi @ayazthemre
Can you please provide your flutter doctor -v & complete reproducible minimal code sample,
Thank you

flutter doctor -v:

flutter doctor -v

[√] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 10.0.19042.1110], locale tr-TR)
    • Flutter version 2.2.3 at C:\devSDK\flutter
    • Framework revision f4abaa0735 (5 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\devSDK\Android
    • Platform android-30, build-tools 30.0.3
    • ANDROID_SDK_ROOT = C:\devSDK\Android
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.58.2)
    • VS Code at C:\Users\ayazt\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.25.0

[√] Connected device (2 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 92.0.4515.131
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 92.0.902.62

• No issues found!

minimal code sample

void main() {

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final loader = document.getElementsByClassName('spinner');
    if (loader.isNotEmpty) {
      loader.first.remove();
    }
    return MaterialApp(
        title: 'Emre Ayaz - Landing Page',
        home: Container(child: TestWidget()));
  }
}



class TestWidget extends StatefulWidget {
  const TestWidget({Key? key}) : super(key: key);

  @override
  _TestWidgetState createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  @override
  void initState() {
    _controller = AnimationController(
        vsync: this, duration: Duration(milliseconds: 1000));

    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      _controller.repeat();
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topLeft,
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Transform.translate(
            offset: Offset(_controller.value * 1500, _controller.value * 500),
            child: child,
          );
        },
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

deployed https://personalwebsite-50c9c--minimalsquareanimations-adepmgfl.web.app

how smooth it looks on my screen

squares.mp4

[TahaTesser]

Hi @ayazthemre
I see you're on windows and experiencing this issue but for some reason, in my test windows has the smooth experience when using flutter build web --web-renderer canvaskit or flutter build web --web-renderer html and macOS has the worst performance. Using both renderers, results are the same for me on Windows, Linux but on macOS HTML renderer has worse performance. I can confirm running locally doesn't have these issues in any mode

Windows

2021-08-04.12-33-40.mp4

Linux

2021-08-04.12-32-32.mp4

macOS

canvaskit

Screen.Recording.2021-08-04.at.12.34.43.mov

HTML

Screen.Recording.2021-08-04.at.13.32.21.mov

Used the following minimal code sample

minimal code sample

import 'dart:html';

import 'package:flutter/material.dart';
 
void main() {

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final loader = document.getElementsByClassName('spinner');
    if (loader.isNotEmpty) {
      loader.first.remove();
    }
    return MaterialApp(
        title: 'Emre Ayaz - Landing Page',
        home: Container(
          color: Colors.yellow,
          child: TestWidget()));
  }
}



class TestWidget extends StatefulWidget {
  const TestWidget({Key? key}) : super(key: key);

  @override
  _TestWidgetState createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  @override
  void initState() {
    _controller = AnimationController(
        vsync: this, duration: Duration(milliseconds: 1000));

    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      _controller.repeat();
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topLeft,
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Transform.translate(
            offset: Offset(_controller.value * 1500, _controller.value * 500),
            child: child,
          );
        },
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

stable	master
❌	❌

Check flutter doctor -v outputs for each channel below

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.3, on macOS 12.0 21A5294g darwin-x64, locale en-GB)
    • Flutter version 2.2.3 at /Users/tahatesser/Code/flutter_stable
    • Framework revision f4abaa0735 (5 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Code/openjdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_292-b10)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode-beta.app/Contents/Developer
    • Xcode 13.0, Build version 13A5201i
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] VS Code (version 1.58.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.25.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 12.0 21A5294g darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 92.0.4515.131

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.5.0-2.0.pre.161, on macOS 12.0 21A5294g darwin-x64, locale en-GB)
    • Flutter version 2.5.0-2.0.pre.161 at /Users/tahatesser/Code/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 8212b58a7f (5 hours ago), 2021-08-04 01:40:03 -0400
    • Engine revision f7f57a7376
    • Dart version 2.14.0 (build 2.14.0-377.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode-beta.app/Contents/Developer
    • Xcode 13.0, Build version 13A5201i
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.58.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.25.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 12.0 21A5294g darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 92.0.4515.131

• No issues found!

✅: No Issue ❌: Issue reproduced