Performance issue Html component
rlems opened this issue · comments
I see the Html component used causes some performance problems for me.
I currently use 14 A11y components in my code and it causes my fps to drop to around 3, while without using A11y it stays close to 60.
Now i've copied your code and created my own A11y component and saw that the main culprit for the drop in fps is line 135 in /src/Html.tsx: camera.updateMatrixWorld();.
This operation seems heavy to execute every frame for every A11y component. Without this line the location for the a11y component seems to be correct, so is it necessary to keep?
I tested it in Chrome and Safari on mac.
I'll take a look at this this week or the next.
There is probably no need for it to run on each frame for each component indeed.
Anyone interested, feel free to make a PR / comment with a suggested solution to this.
Right now it works the same way as the /drei Html coomponent
https://github.com/pmndrs/drei/blob/master/src/web/Html.tsx#L228
Great, thank you.
I saw the Drei Html component uses that as well, but it did seem you created your own implementation of the Html component since they don't fully match, that's why i raised the issue here. I don't use the Drei Html component, but the problem might arise there as well.
I might be missing something very obvious but could we not disable HTML element positioning when not debugging? As far as I understand there is no functional reason to position them at all, right?
Sorry I just saw your comment.
The position is part of the accessibility feature.
The focus outline needs to be positioned correctly in the page to know what you're currently focusing.
Same for digital screens, the HTML elements needs to be positioned correctly to react correctly to the diverse finger-touch actions.