Improve ShapeDecoration performance. #108648

bernaferrari · 2022-07-29T22:12:54Z

Discussion: #108052

I believe that PR became too big and it is doing too many things at once. This PR is not breaking but might require a g3fix. So I'm splitting it. Easier to fix and easier to track the performance gains.

cc @Hixie. Same code you already reviewed (with an additional comment in box_border.dart).

Edit: I could make this change (really small optimization, only render border if width != 0) yet the code looks horrible. So I'm not making it, yet.

flutter-dashboard · 2022-07-29T23:20:16Z

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #108648 at sha 4edb88ff4f45d7e38b5128f3f928c39cdec64f8e

bernaferrari · 2022-07-29T23:50:37Z

I think we should ignore that. It is probably a path vs circle rounding error thing.

Hixie · 2022-08-01T21:28:41Z

Yeah it is indeed a change in antialiasing. Maybe drawCircle and drawPath differ slightly?

I've marked it as OK.

Hixie · 2022-08-01T21:29:44Z

Edit: I could make this change (really small optimization, only render border if width != 0) yet the code looks horrible. So I'm not making it, yet.

Yeah I would not make that change either.

packages/flutter/lib/src/painting/borders.dart

Hixie · 2022-08-01T21:32:58Z

packages/flutter/lib/src/painting/box_border.dart

@@ -180,6 +180,17 @@ abstract class BoxBorder extends ShapeBorder {
      ..addRect(rect);
  }

+  @override
+  void paintInterior(Canvas canvas, Rect rect, Paint paint, { TextDirection? textDirection }) {
+    // If `ShapeDecoration(shape: Border.all())`, ShapeDecoration doesn't


If -> For?

Maybe clarify this further, explaining that this class only ever paints a rounded border if paint is given one and that this is an extension to the superclass' API.

Thanks! I re-wrote it:

// For `ShapeDecoration(shape: Border.all())`, a rectangle with sharp edges // is always painted. There is no BorderRadius parameter for // ShapeDecoration or Border, only for BoxDecoration, which doesn't call // this method.

Hixie · 2022-08-01T21:35:10Z

packages/flutter/lib/src/painting/shape_decoration.dart

+              _decoration.shape.getOuterPath(rect.shift(shadow.offset).inflate(shadow.spreadRadius), textDirection: textDirection),
+              shadow.toPaint(),
+            );
+          }),


i guess technically we're computing the paints more than we need to (we only need to compute them the first time, not when rect changes). Maybe add a TODO? Or not, your call. It's not a big deal.

I need to test, but what if rotation, Transform, resize happens? Is it the same shadow?

I'll try later (possibly tomorrow) but if we can get this working, optimization can be really big.

well the paint definitely isn't affected by the rect (it's computed by shadow.toPaint(), which doesn't get the rect). But the question is whether it's more expensive to compute the paint, or more expensive to handle the overhead of storing the paint in some other data structure in parallel with the rect bounds / paths. IIRC you had it the other way before and it was slower?

I believe it was slower because of the additional loop, maybe the map, not exactly the additional structure. In this case, everything is going to be mostly similar. But I'll test, let's see.

I have a proposal.

What if we had a mixin PrimitiveShape { paintInterior(...) } that is applied on RoundedRectangleBorder / CircleBorder / Stadium Border, then we do if (shape is PrimitiveShape) { (shape as PrimitiveShape).paintInterior(...) }?

We wouldn't need preferPaintInterior. And... maybe, one day, we could delimit the BorderSide.only/MultipleBorderSide (I still need to convince you) to only work on shapes that have that mixin. Is this too crazy?

We would solve a variable issue and a future documentation issue.

--

Alternate proposal: rename preferPaintInterior to isPrimitiveShape and explain the concept I just invented. But mixin sounds more fun.

Found what you said. Now I understand the issue. Testing a few things.

After debugging today: negligible difference, I'm reverting for the old way. Not changing what already works fine. My sample only uses a single color, if paint is complex enough, there might be differences.

Again, you are correct. Thanks!

Hixie

goderbauer

LGTM

packages/flutter/lib/src/painting/borders.dart

goderbauer · 2022-08-12T18:06:42Z

@bernaferrari What is the status of this PR? It looks like the three last comments above may still be unresolved?

bernaferrari · 2022-08-12T18:10:03Z

I traveled for the past few days, so couldn't find time to run some additional benchmarks to see if a variable was better or worse than a loop. I'll probably take a look tomorrow.

I also made a proposal to use a mixin instead of the hasPaintInside getter, but didn't get an answer.

Regardless, everything should be resolved on the next few days.

bernaferrari · 2022-08-17T03:46:18Z

Sorry for the delay, here we go!! Fixed what needed to be fixed.

I rewrote this, if it is ok, feel free to add auto-submit. If it is not, let me know how I can improve. That's the last thing.

flutter/packages/flutter/lib/src/painting/box_border.dart

Lines 185 to 188 in d742c5a

    
           // For `ShapeDecoration(shape: Border.all())`, a rectangle with sharp edges 
        
           // is always painted. There is no BorderRadius parameter for 
        
           // ShapeDecoration or Border, only for BoxDecoration, which doesn't call 
        
           // this method.

bernaferrari · 2022-08-17T04:08:49Z

I also made the snippet abstract so it compiles without implementing everything else, now that the snippet rules changed:

flutter-dashboard · 2022-08-17T04:51:21Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #108648 at sha df7203d

Hixie · 2022-08-17T05:30:30Z

I also made the snippet abstract so it compiles without implementing everything else

You don't need the abstract if you have the // ... bit (it adds an ignore for implementing abstract methods).

bernaferrari · 2022-08-17T05:44:51Z

Thanks, I didn't know that.

flutter-dashboard · 2022-08-17T06:15:32Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #108648 at sha a58ad17

Hixie · 2022-08-17T07:22:11Z

Thanks, I didn't know that.

Don't worry, you have no real way to have found out. It's documented in the bottom of a locked filing cabinet stuck in a disused lavatory with a sign on the door saying "Beware of the Leopard": https://github.com/flutter/flutter/blob/master/dev/bots/analyze_snippet_code.dart#L51

flutter-dashboard · 2022-08-17T14:09:32Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #108648 at sha 6f0e420

bernaferrari force-pushed the Faster-ShapeDecoration branch 3 times, most recently from 8142b79 to 4edb88f Compare July 29, 2022 22:35

flutter-dashboard bot added the will affect goldens Changes to golden files label Jul 29, 2022

bernaferrari force-pushed the Faster-ShapeDecoration branch from b228ee4 to 4edb88f Compare July 31, 2022 18:59

Hixie reviewed Aug 1, 2022

View reviewed changes

packages/flutter/lib/src/painting/borders.dart Outdated Show resolved Hide resolved

Hixie reviewed Aug 1, 2022

View reviewed changes

Hixie approved these changes Aug 1, 2022

View reviewed changes

goderbauer approved these changes Aug 2, 2022

View reviewed changes

packages/flutter/lib/src/painting/borders.dart Outdated Show resolved Hide resolved

bernaferrari added 5 commits August 17, 2022 00:40

Improve ShapeDecoration performance.

bba882f

Fix paragraph.

872e2ec

Fix goderbauer review.

cbaad31

Reword Border paintInterior.

93b6a38

Revert optimization.

2eeddc2

bernaferrari force-pushed the Faster-ShapeDecoration branch from 9f8713e to 2eeddc2 Compare August 17, 2022 03:41

Fix line.

d742c5a

Fix documentation with abstract.

f2b8fcb

Fix analyzer.

df7203d

Remove abstract

a58ad17

BorderRadius -> borderRadius in the comment

6f0e420

Hixie added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 17, 2022

auto-submit bot merged commit 01f3fca into flutter:master Aug 17, 2022

bernaferrari deleted the Faster-ShapeDecoration branch August 17, 2022 22:06

This was referenced Aug 18, 2022

Roll Flutter from cb936c51f8b2 to 9eca99b8df79 (31 revisions) flutter/packages#2470

Merged

Roll Flutter from cb936c51f8b2 to 9eca99b8df79 (31 revisions) flutter/plugins#6291

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 18, 2022

01f3fca Improve ShapeDecoration performance. (flutter/flutter#108648)

163f66e

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Aug 18, 2022

01f3fca Improve ShapeDecoration performance. (flutter/flutter#108648)

65100ff

bernaferrari mentioned this pull request Aug 22, 2022

I don't think Google Testing is working #110031

Closed

bleroux mentioned this pull request Sep 22, 2022

Reland - Fix ExpansionTile shows children background when expanded #112178

Closed

bernaferrari mentioned this pull request Aug 15, 2024

Fix anti-aliasing when painting borders with solid colors. #153365

Merged

Improve ShapeDecoration performance. #108648

Improve ShapeDecoration performance. #108648

Uh oh!

Conversation

bernaferrari commented Jul 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

flutter-dashboard bot commented Jul 29, 2022

Uh oh!

bernaferrari commented Jul 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Hixie commented Aug 1, 2022

Uh oh!

Hixie commented Aug 1, 2022

Uh oh!

Uh oh!

Hixie Aug 1, 2022

Choose a reason for hiding this comment

Uh oh!

bernaferrari Aug 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hixie Aug 1, 2022

Choose a reason for hiding this comment

Uh oh!

bernaferrari Aug 1, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bernaferrari Aug 1, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hixie Aug 1, 2022

Choose a reason for hiding this comment

Uh oh!

bernaferrari Aug 1, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bernaferrari Aug 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bernaferrari Aug 2, 2022

Choose a reason for hiding this comment

Uh oh!

bernaferrari Aug 17, 2022

Choose a reason for hiding this comment

Uh oh!

Hixie left a comment

Choose a reason for hiding this comment

Uh oh!

goderbauer left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

goderbauer commented Aug 12, 2022

Uh oh!

bernaferrari commented Aug 12, 2022

Uh oh!

bernaferrari commented Aug 17, 2022

Uh oh!

bernaferrari commented Aug 17, 2022

Uh oh!

flutter-dashboard bot commented Aug 17, 2022

Uh oh!

Hixie commented Aug 17, 2022

Uh oh!

bernaferrari commented Aug 17, 2022

Uh oh!

flutter-dashboard bot commented Aug 17, 2022

Uh oh!

Hixie commented Aug 17, 2022

Uh oh!

flutter-dashboard bot commented Aug 17, 2022

Uh oh!

Uh oh!

bernaferrari commented Jul 29, 2022 •

edited

Loading

bernaferrari commented Jul 29, 2022 •

edited

Loading

bernaferrari Aug 17, 2022 •

edited

Loading

bernaferrari Aug 1, 2022 •

edited

Loading

bernaferrari Aug 1, 2022 •

edited

Loading

bernaferrari Aug 1, 2022 •

edited

Loading

bernaferrari Aug 2, 2022 •

edited

Loading