InteractionManager should cache interactionDOMElement.getBoundingClientRect

mapPositionToPoint currently calls interactionDOMElement.getBoundingClientRect on every event.

Please see:

https://gist.github.com/paulirish/5d52fb081b3570c81e3a

This is expensive as it forces the browser to perform unnecessary style recalculations and may repaint any DOM elements/layers that are present outside of the PIXI canvas itself.

For apps/games that use only PIXI this isn’t much of an issue, but for any application that makes significant use of the DOM in addition to PIXI, this can be a big problem.

When I simply cache the result of getBoundingClientRect so that it doesn’t get called during each time an event fires, the issue is resolved and all of this extra work no longer occurs, potentially saving several ms each frame. On my 4K laptop, in an app with a lot of CSS and DOM elements, this can mean the difference between 25fps and 60fps.

This cache needs to be set in setTargetElement, and in the resize event.

I’m not certain this would be necessary, but potentially it may also be worth updating the cached values on pointerdown/mousedown also, so that it gets updated every time an interaction begins.

[englercj]

We could push the cache updating into userland, expose an API that refreshes the bound and it is up to the user to determine when/if they need to call it. I think the bounds being invalidated is not that common (maybe just resize).

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.