(That headline is a bit of hyperbole, but it was true for our project!)
UPDATE: According to Andrei (see comment below), this fix also halved the startup time of their app! Time to try to add some more keywords to this article in hopes that more folks will stop by and give this a shot: Flex 4 slow vs Flex 3. How to speed up Flex 4. Flex 4 performance. Also, Alex Harui recently posted on his blog about Flex 4 performance issues, and he mentions that their StyleProtoChain can be slow, and provides an alternate way of getting perf back. I haven’t tested his method though. If you do, I’d love to hear how it compares. And now on with the article…
We are in the process of upgrading our AIR app, You Need a Budget, to use Flex 4. We’re basically trying to change as little as possible, but we need to use Flex 4 for a new library of code we purchased. That means we’re still using our old MX controls, and we’re using the Halo theme. However, we quickly discovered a major performance bottleneck. Our app was taking at least twice as long to load as it did before. So, I loaded up the debugger and randomly started breaking into the code. Virtually every time I broke into the code, I was in the same darn function:
For every component being instantiated, Flex was doing a linear search through all of our styles and asking each of them, “Do you apply to this component being instantiated?” We have a stylesheet with about 300 declarations in it, so that meant that Flex was making 300 queries per object instantiated. In short, it was slow.
So, I monkey-patched StyleProtoChain.as to make it cache these style lookups. No more linear searches! My fix is quick and dirty, so there are scenarios where the styles could get changed out from under the cache. Although it appears to work great for us, I can imagine lots of scenarios where it will break, so your mileage may vary. Still, my guess is that you’ll see a tremendous speed improvement. Our load times went down by more than half. Any time I can get performance increases like this with so little code, I want to share it with the world.
This is a monkey patch of Flex 4.1, so I don’t know how/if it will work for Flex 4.0 or 4.5. To find my changes look for the “//TB” comments or anything related to the matchUniversalStyleDeclarations function I added.
If you’ve never monkey patched Flex before, just drop this file into your project in an “mx/styles” folder. Do a full rebuild, and I believe you’ll be good to go.
You might have to reference StyleProtoChain elsewhere in your project to guarantee it gets compiled in, but I don’t recall.