Performance with long lists?

[formatjs]

Performance with long lists?

[ericf]

Okay, so here's some more details…

In Chrome, running the following is very slow, because creating Intl.NumberFormat instances is expensive:

for (var i = 0; i < 2000; i += 1) {
  new Intl.NumberFormat('fr', {style: 'currency', currency: 'USD'}).format(i);
}

The above takes 530ms. This is why we do the caching/memoization of all format instances, switching the code above to reuse the same format instance, the perf change is dramatic!

var nf = new Intl.NumberFormat('fr', {style: 'currency', currency: 'USD'});
for (var i = 0; i < 2000; i += 1) {
  nf.format(i);
}

This takes just 7ms to execute! Note: that in both cases no output was written to the screen.

---

For a baseline, I updated your Numbers.js file's render() method and removed the formatNumber(), but made sure React would still include the <span> element with different content for each locale:

render: function() {
    var self = this;
    var list = this.state.numbers.map(function(number){
        return <li key={number}>{number} - {number + self.props.locales[0]}</li>
    });

    return <ul>{list}</ul>;
}

I then profiled how long it takes for React to re-render when using the locale switcher, and I'm seeing a time of ~160ms.

When I ran the profiling with the call to formatNumber(), I'm seeing times ~200ms which are in the same as you're seeing. Digging into the CPU profile I'm seeing the calls to formatNumber() are making up ~40ms, which makes sense and adds up as we'd suspect over the baseline.

So it's clear that a bulk of the time is spent re-rendering in React, and not formatting the numbers. The reason formatNumber() is not as fast as the 7ms times we're seeing above is the overhead of the format instance memoizer. To keep things simple for the mixin, we have to do some work in the memoizer to see — based on the arguments passed to the function — if there's a format instance we can reuse. While this slows things down a bit, it's still over an order of magnitude faster than creating a new Intl.NumberFormat instance object for every call to formatNumber().

That said, I've looked into a few ways I can improve the memoizer and make it faster, but any gains here are unlikely to significantly impact the overall time spend rendering this example since we're starting at a 160ms baseline.

[ericf]

I'll try running the example see what I can find. Thanks for boiling the example down to something I can run!

What browser were you running this in?

With all the modules in FormatJS we've taken care to optimize perf. Under the hood formatting numbers uses the built-in Intl.NumberFormat API. It's pretty expensive to create one of these Intl.NumberFormat instances, so we have a layer that will cache and reuse them when possible, and simply pass the new number value into the format instance.

[pselden]

Using Chrome Version 38.0.2125.104 on Mac OSX Mavericks.

[pselden]

Thanks for looking into it. This is a bit disappointing to me since everything I've seen has told me that React should be beating Angular handily at this sort of thing :(.

In case you're interested, I've created a similar Angular example: https://github.com/pselden/angular-render-test. This time I just used the chrome Timeline to see how much time was spent in JavaScript -- and it's only 30ms (followed by about 200ms of browser rendering and painting -- which is also there for React).

Thank you again for looking into this -- I'll see if I can figure out any way to speed things up in other ways.

[ericf]

@pselden that's for brining this to our attention. I'm sure there many posts out there about optimizing things with React. The easiest way I could think of is not showing all that data at once — it will be hard for users to grok a list of 2000 things anyways.