Web: Poor performance when using Shadows + Animation #54507
Comments
|
@esDotDev Has this been run with the |
|
Yes, and it runs much better there, but is not rendering correctly on Android. Seems like this should run ok with Vanilla Flutter though, the actual repaint region is < 10% of the screen. Is the entire view getting repainted each frame? My understanding is only the AnimatedSpinners should be re-drawing here... What's most confusing is that on some MBP machines, we're seeing 5fps in Chrome, while others it's 60. Very similar machines. |
|
8 fps Could it be because of the Macbook high resolution? |
|
8FPS Could be the GPU? |
|
13 FPS But with some starts of web-site there is 60 fps or 13-20fps or less UPD: 2560 x 1600, Retina |
|
It looks like this might be related to 4k, could everyone make sure to note their screen resolutions? |
|
31 FPS |
|
I've got 2 1080p's plugged in, did you want it trying on one of those? |
20~22 FPS Just tried on the 1080p (one of 2 over a USB C dock) |
Interesting, no dedicated GPU on that XPS? |
may be some of them have the Chrome Version 81.0.4044.92 -- No Extensions skia disabled and hardware acceleration disabled - 8fps skia disabled and hardware acceleration enabled - 20fps Safari Version 13.1 (15609.1.20.111.8) -- No Extensions skia disabled - 60fps MacBook Pro (16-inch 3584 x 2240, 2019) scaling 1:1 |
Yeah, it's got a NVIDIA GeForce GTX 1650 Worth noting, VT-X is off, since I need to be able to use VirtualBox |
Chrome: 10 fps
Chrome: 6 fps |
|
17 FPS Device: HP Envy |
It killed my Samsung S2 It runs at 60 fps on my laptop |
|
Just to add to the data here. |
|
6-8 fps |
|
Model: Switch SA5-271 V1.03 12 FPS 7 FPS |
|
fps: 16 |
|
"14" fps, but the CircularProgressIndicators are clearly animating perfectly smoothly |
|
On a 2013 MacBook Pro (2.6 GHz Dual-Core Intel Core i5, 8 GB 1600 MHz DDR3): |
|
7-8 FPS on PixelBook i5 (Chrome OS version 80) |
|
Looks like fps is proportional to screen size, maybe specifically width, not sure yet. I'm seeing 15-20 fps when the window is maximized (monitor resolution is 1920x1080) but I hit 60 fps when i shrink the window (maybe to 1/3 the width, around 600 px). Chrome |
|
I'm getting ~10fps when fullscreen on chrome. 2019 Macbook pro. If I resize the window to 1/3 width and height, it will reach 60fps. On safari, however, I get 60 fps fullscreen, and weirdly while continuously resizing it jumps up to ~90fps. MacBook Pro (13-inch, 2019, Two Thunderbolt 3 ports) |
|
18 fps. Pixelbook, using an attached second monitor and lots of tabs open. |
|
8fps, internal or external display, Chrome (not smooth) MacBook Pro (15-inch, 2017) (60 fps on safari, very smooth animation) |
|
Chrome: 8fps when full screen, goes to 17fps using quarter of screen. Also it's about 8fps when using half-width or half-height. It consumes very little CPU but makes my typing lag real bad. This is a kinda known issue in Cinnamon, but you don't see it often unless you're really stressing the laptop. My average load is 0.66 and cpu goes between 10-20% for all 4 cpus. Firefox: can't go higher than 10 fps not even with quarter screen. Dell 5520 (similar to XPS 15 2017 model), 4k screen. Lowering the res to HD (with hi-dpi) the FPS goes way higher, but so it does if I shrink the screen. Edit: chrome is kinda the same, slightly worse with kernel 5.0.0-43-generic, but system lag is waay worse - which is the opposite of my overall experience while usiing kernel 5.0 on this laptop. I can safely say I'll actively steer away of any web pages presenting this problem while I'm using this laptop, it makes the whole laptop unbearably slow. ======================= Android Oneplus 6 (still in Pie) 1080 x 2280 pixels, 19:9 aspect ratio. Chrome portrait: 23 fps landscape: 26 fps Chrome Canary portrait: 26 fps landscape: 29 fps. Firefox portrait: 7 fps landscape: 8 fps |
TahaTesser
added
customer: crowd
TahaTesser
added
the
c: performance
|
15 fps, Chrome |
|
Thanks for filing the issue and providing sample code! We should definitely look into this use-case. In the meantime, consider replacing Here's the code for the class WebPerformanceSpike extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.green.shade100,
body: ListView(
children: <Widget>[
FpsIndicator(),
_Box(),
_Box(),
_Box(),
_Box(),
_Box(),
_Box(),
_Box(),
_Box(),
],
),
),
);
}
Container _Box([Widget child]) {
return Container(
margin: EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [BoxShadow(spreadRadius: 4, blurRadius: 4, color: Colors.blue)],
),
alignment: Alignment.center,
width: double.infinity,
height: 100,
child: CircularProgressIndicator());
}
} |
|
Nice, good to know. This is just a test case to highlight this general performance issue. In our production app it's more like 4 or 5 shadowed panels / cards, that are positioned around the app, and there would be no ability to put those in a List. When we trigger some sort of animation on that page, like a SlidingTab, we can drop to single digit FPS on devices with 4k monitors. |
We should totally optimize this. I'm only pointing out possible solutions that you can apply today without waiting for the Web engine fix. If RepaintBoundary _Box([Widget child]) {
return RepaintBoundary(child: Container(
margin: EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [BoxShadow(spreadRadius: 4, blurRadius: 4, color: Colors.blue)],
),
alignment: Alignment.center,
width: double.infinity,
height: 100,
child: CircularProgressIndicator()));
}
|
|
Cool, just wanted to be sure we weren't focusing too narrowly on items within a list. We've put together another test for you which is much more configurable: The good news is that RepaintBoundaries works like a charm! On a 2019 Retina MBP:
Hopefully this fix will hold when we port back to the main application! Some feedback:
bool enableShadows = true;
double spinCount = 2;
bool useRepaintBoundaries = false;
class WebPerformanceSpike2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StatsFl(
child: StatefulBuilder(
builder: (_, setState) => Stack(
children: <Widget>[
//Left
Positioned(top: 0, bottom: 0, left: 0, width: 200, child: _ShadowBox(spinCount > 0)),
//Top
Positioned(top: 0, left: 200, right: 200, height: 200, child: _ShadowBox(spinCount > 1)),
//Right
Positioned(top: 0, bottom: 0, right: 0, width: 200, child: _ShadowBox(spinCount > 2)),
Positioned(
top: 200,
bottom: 0,
left: 200,
right: 200,
child: ListView(
children: <Widget>[
//Bottom
_ShadowBox(spinCount > 3),
_ShadowBox(spinCount > 4),
_ShadowBox(spinCount > 5),
_ShadowBox(spinCount > 6),
_ShadowBox(spinCount > 7),
],
)),
Positioned(
left: 250,
top: 30,
width: 600,
child: Row(
children: <Widget>[
Text("Shadows:"),
Checkbox(tristate: false, value: enableShadows, onChanged: (v) => setState(() => enableShadows = v)),
SizedBox(
width: 20,
),
Text("RepaintBoundary:"),
Checkbox(
tristate: false,
value: useRepaintBoundaries,
onChanged: (v) => setState(() => useRepaintBoundaries = v)),
SizedBox(
width: 20,
),
Text("Spin Count:"),
Slider(
min: 1, max: 8, divisions: 7, value: spinCount, onChanged: (v) => setState(() => spinCount = v)),
],
),
),
],
),
),
);
}
}
class _ShadowBox extends StatelessWidget {
final bool showIndicator;
const _ShadowBox(this.showIndicator, {Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
BoxShadow shadow = BoxShadow(spreadRadius: 5, blurRadius: 5, color: Colors.black.withOpacity(.05));
Widget spinner = !useRepaintBoundaries
? CircularProgressIndicator()
: RepaintBoundary(child: CircularProgressIndicator(backgroundColor: Colors.red));
return Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(color: Colors.white, boxShadow: enableShadows ? [shadow] : null),
alignment: Alignment.center,
width: double.infinity,
height: 100,
child: SizedBox(width: 10, height: 10, child: showIndicator ?? true ? spinner : Container()),
);
}
} |
|
On Firefox I'm getting rock solid FPS, from both the first and second examples, around 60-100 for the first one and then 45-60 for the second one without repaint boundaries, and then a solid 60 with it. It seems the second one locks the FPS to 60 so it could be a lot higher potentially without the lock. |
|
@esDotDev a round of optimizations landed related to this. If you remove FpsIndicator (with TweenAnimationBuilder constantly refreshing) and turning on FPS meter in Chrome Devtools rendering, i see consistent 60fps. Closing issue. |
|
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of |
and others
The following spike runs quite poorly on Web, in release mode on latest Master.
https://dev.gskinner.com/flutter_perf/shadows/#/
Testing with Chrome:
Laptop with a 9750H CPU: 25-30fps
LG ThinQ Android: 7fps
PC, w Ryzen3700x, with 6x CPU throttle: 30fps
It seems to be related to the shadows, if I remove the shadows it runs 60fps on Android.
The text was updated successfully, but these errors were encountered: