Re:First Impressions Using React Native
by jordwalke on Friday February 06, 2015 @03:00PM
(#9011172)
I haven't found serialization to be anywhere near the bottleneck. How long does it take to serialize/deserialize a 16 element array? I could see how this would be an issue if you had hundreds of them per frame. But for most purposes an entire 16 element array is overkill and you could probably come up with a more compressed description of the transforms (scale, rotate, translate) and consider adding a pooling layer.
People attribute pauses to GC, when it's sometimes just the browser container environment acting up and there's nothing we can do about it - so it's easy to write it off as GC. Not sure about today, but 1.5 years ago (i = new Image(), i.src="http...") could block the JS thread for as much as 19ms. In a larger app, it's easy to write that off as GC, but (at least on iOS) the performance tooling is really lacking and it's tough to find the culprit.
Reflowing is a big deal, I agree.
Re:First Impressions Using React Native
by malandrew on Monday February 09, 2015 @03:40AM
(#9020213)
Basically if you want to prevent reflowing you end up making everything a texture and that leads you to making many many CSS transform changes on every frame. 60fps is easy to hit on a modern desktop, but mobile performance requires more effort to achieve an effect that feels natural. The problem with the marshalling is that it is comparatively expensive and a blocking operation, which is not conducive to buttery smooth graphics performance on all platforms.
Re:First Impressions Using React Native
by peterhunt on Friday February 06, 2015 @03:49PM
(#9011449)
Blowing out texture memory accidentally was also a big deal when I was measuring this stuff.
You can now transfer typed array data using the newest postMessage API. http://updates.html5rocks.com/2011/12/Transferable-Objects-L...
The biggest problems with performance are:
- GC pauses
- triggering reflow
- marshalling data across interfaces (serialization/deserialization of native types into strings and back again).
That last one is an absolute killer when it comes to applying 3D matrix transforms. Basically, you're taking an array of floats, serializing them into a string to do an element.style property assignment, so that the browser can then take that stringified representation and convert it back into an array of floats that it can apply. Huge perf hit here.