microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.33k stars 1.14k forks source link

[Perf] Perform style.transform aggregation in native code #4468

Open aschultz opened 4 years ago

aschultz commented 4 years ago

React Native has two different code paths for converting the style.transform property into a matrix that is then applied to a native view.

On iOS and Android, the processTransform function short-circuits. The transform property is passed down as-is to the native layer, offloading the matrix multiplication math to native code within the View implementation.

On other platforms (here, Windows), the JS function instead does this work directly.

I suggest changing RNW to match iOS and Android. Animations often use and update transforms frequently, so this could provide a performance boost.

NickGerleman commented 4 years ago

Have we profiled this? I wouldn't have initially expected generation of a 4x4 matrix from JS to be that expensive, even if we're doing it once per frame during animations.

chrisglein commented 4 years ago

Seems likely RNW would benefit as well. The gains here depend on animation usage so it's hard to know how big the gain will be here.