Drawing text outside canvas' bounds is expensive on the Web

[yjbanov]

On the Web we draw all text in the picture irrespective of whether it is within the visible canvas bounds or not. A picture can contain a lot of text but clipped to a smaller scrollable region, which is typically at most no bigger than the screen (can be bigger in a windowed or multi-monitor situations but even there there's some upper bound).

This gets expensive quickly, particularly when text is rendered using HTML <p> tags. We have reports where scrolling a picture with lots of text costs hundreds of milliseconds per frame.

Solution

Since we layout text ahead of time we know the exact rectangle occupied by it. We also keep a transform and clip stack. We can use this information to determine whether the text is visible and skip drawing it if it's not.

[ferhatb]

Is there more info on structure? Is it a single picture or multiple?

[yjbanov]

Multiple pictures but each picture's bounds is orders of magnitude smaller than the amount of text content, and so drawing most of the text is wasteful.

[github-actions]

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 flutter doctor -v and a minimal reproduction of the issue.