Anime stone theme is slow on edge+macos

[cassidoo]

Edit: Problem narrowed down to the use of the Anime stone theme on Chrome based browsers, likely unrelated to the g transform code below, but unknown.

---

TL;DR: There's a performance hit from per-stone <g transform="translate(...)"> on large/long game boards.

Summary

Rendering Go boards currently creates a <g> group, each with its own transform="translate(x, y)", for every stone. On some browsers (notably Edge on Mac), this leads to significant lag and slow rendering, especially on pages with multiple boards or previews, or during games with more than a hundred moves.

Example of current output:

<g transform="translate(208,16)">
  <use href="#anime-black-8-59" x="-0.5" y="-0.5"></use>
</g>
<g transform="translate(128,80)">
  <use href="#anime-white-8-58" x="-0.5" y="-0.5"></use>
</g>

If I modify the output to instead use direct x and y positions on the <use>, and skip the per-stone <g transform="...">, performance seems to improve:

<g>
  <use href="#anime-black-8-59" x="208" y="16"></use>
  <use href="#anime-white-8-58" x="128" y="80"></use>
  <!-- ...and so on... -->
</g>

Proposal

• Instead of generating a <g> for every stone, batch all <use> elements under a single <g>.
• Set the actual board coordinates using x and y attributes on the <use> element, eliminating the need for transform="translate(...)" per stone.
• This approach appears to render much faster and solves the performance issue in Edge on Mac, while maintaining the visual output, based on my manual testing. On boards with hundreds of stones, the SVG DOM gets very deep and browsers on lower powered machines struggle with many nested groups and transforms.
• I think this change will happen in SVGRenderer but I'm not 100% sure I'm in the right place.

Thanks for reading!

[anoek]

I seem to recall having tried the direct positioning during the initial implementation and finding that oddly the translate worked better. That said, not only could I be wrong, but it could have been something else I was thinking, I could be misremembering, or things could have changed.

Have you tried this on any other browsers by chance to see what, if any, impact it would have?

[cassidoo]

Okay I just did a screen recording, I wonder if something else is at play. I thought that this rendering extra tags might be the issue, but maybe you can see something else? Tried Firefox and incognito (and didn't try Safari in the recording):

Screen recording link, volume up!

It actually was moving a little faster than normal on the screen recording, but particularly during games, it's slow enough that sometimes it misclicks where I am making moves because of the lag. It's weird though that this lag only is happening when I'm logged in! If I disable hardware acceleration in the browser, the issues stop, but then other websites don't work.

[anoek]

Thanks for the recording, that helps a lot.

Can you disable LastPass and try it? I see you have it enabled in incognito, but I'm wondering if you aren't authenticated in the incognito so it's not scanning the DOM thus isn't slowing things down.

I experienced something very similar during the initial implementation the SVG renderer with BitWarden, the solution (if I recall correctly) was to put the SVG in a shadowdom, but maybe LastPass on edge iterates over shadowdom elements too or something.

If that doesn't solve it, can you list the extensions you have installed?

FTR the quick workaround is to toggle on the "Use old canvas goban renderer", but I'd love to get to the bottom of the issue and see if we can figure out how to make it performant on our end.

[cassidoo]

I just removed all of my extensions and tried it, but there was no behavior change, sadly! I have:

• LastPass
• Raindrop
• uBlock Origin
• Copy mailto+
• Remove Gmail Categories

[anoek]

Well that's doubly strange.

Ok so just to confirm:

On Edge+MacOS X

When you're in your normal browser session:
If you're logged out, everything is fast
When you're logged in, it's slow

When you're in icognito
If you're logged out, everything is fast
When you're logged in, everything is fast

Firefox + MacOS X

everything is fast

Safari + MacOS x

everything is fast?

[cassidoo]

Okay confirming everything and just tested it all again:

On Mac:
Edge Incognito, Chrome, Firefox, and Safari are all fast, logged in and out.
Edge, when I'm logged out, is fast.
Edge, when I'm logged in, is slow, even when all my browser extensions are disabled.

On PC (Windows):
Everything is fast, no issues.

[anoek]

Only when you're logged in... that is really really strange. Is there a difference in theme when you're logged in vs logged out?

[cassidoo]

Oh my word that was it!! I had these stones picked, but once I switched to the defaults, it was all fast again! Doh I can't believe I didn't try that before 😅

[anoek]

Ahh, those are SVGs themselves and it looks like that's causing an issue, I'm able to reproduce this on Chrome+Linux so I think it's affecting all browsers in that family. Firefox seems to make use of the <use> tags appropriately and keep things fast, and I had thought I'd tested this combo on chrome, but either I didn't or there was a regression. Either way, definitely reproducible now across systems, thanks for sticking with it to get to the bottom of the issue!

[cassidoo]

Ahhh amazing! I'm so glad we figured this out, it was driving me nuts trying to figure it out in the console. Thank you for helping with it!!