1

We have some performance issues with IE10/11. The following plunker explains some of our degrading performance while repeating table rows with custom elements.

Plunker Example

code

In this plunker example, we get a total of 68 ms in chrome to render the entire table. In IE11 we get 280ms and see a 100% increase in render speed per row. While chrome do up to 3 rows per ms, IE does one every 2ms.

This plunkr is a basic model of our application. In our application we repeat the following template which is alot heavier. It involves style calculation and show/hide bindings depending on the users settings and permission level.

It's in swedish so don't mind the text. example

The second row (expanded information) is if.bound so it's not drawn initially.

In our application, if we render a view with 100 rows of our template, chrome renders the entire table in 587 ms. IE11 does it in 3779ms. Edge does it in 1283ms, and Firefox 909ms.

Each row takes about 30ms in IE11,

Is there any reason IE11 should perform so much worse with the aurelia-template? What can we do to improve IE render speed? I have tried setting bindings to oneTime but that didn't do much. Is there something you should avoid doing in custom elements that doesn't work well with repeating and IE. We want the custom elements because of reusability and code management since the template is pretty big.

Anders
  • 878
  • 1
  • 9
  • 20

2 Answers2

2

Make sure you're using an up to date version of Aurelia, and make sure that you're using Bluebird if you need to support IE or older versions of Edge, as their Promise implementations are atrociously bad.

If you replace the index.html in your Plunkr with this: 

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="//cdn.jsdelivr.net/bluebird/3.4.5/bluebird.min.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script> 
  </body>
</html>

Then the last row's draw time on my desktop is 278 ms in IE 11 on Window 10. See here: plunkr

Ashley Grant
  • 10,879
  • 24
  • 36
  • I have updated my plunkr now aswell. I don't understand how your answer helps our case, its the same speed on your plunkr.But there is still the fact that IE10 is much slower. Is there no way to up the performance with IE10 and aurelia? In our real application we already use the latest version of aurelia. I did a small comparison with angular2 without converting the whole thing http://plnkr.co/edit/7VGTXg4MQ6QIN1ZJ0eqx?p=preview What is interesting is that angular2 seems to render every row within 10ms after first row is rendered (which is slower). But overall faster. – Anders Nov 07 '16 at 08:55
  • I really have a feeling we're comparing apples and oranges here. The way that Aurelia and NG2 manipulate the DOM are completely different, and this is shown by how the timers differ. Angular 2 has its own JavaScript HTML parser and doesn't really work directly with the DOM like Aurelia does. So the time reported by your NG2 code isn't "honest". – Ashley Grant Nov 07 '16 at 15:23
  • I wish we had a way to run both of these plunkrs side-by-side hitting run at the same time. Repeatedly. I say repeatedly b/c I'm seeing wildly different run-times reported for both versions over repeated runs in an IE10/Win7 VM. That being said, both Aurelia and Angular 2 seem to run pretty slow for first render in IE 10. I'm gonna play with a few things to see how the perceived speed changes. – Ashley Grant Nov 07 '16 at 15:25
  • Also, why does the Aurelia plunkr use a router but the NG2 one doesn't? – Ashley Grant Nov 07 '16 at 15:26
  • I think a big part of what is making your code run slowly is the time getter itself. Interestingly, when I tried to create a "toggle" button, the time getter actually breaks Angular 2 in dev mode. I've reached out to my contact on their team to see if there's a way to fix that w/o going in to Prod mode. – Ashley Grant Nov 07 '16 at 16:37
  • I honestly haven't gotten around to looking at more than basic Angular2 stuff so this was my real first go around to wrap it all together and didn't have much time. That is why i left some parts out. I know the test is not accurate and that something doesn't work with the timers (could not find a way to oneTime bind in angular2). We do prefer prefer the aurelia style of coding over angular2. Just looking to find some way to get the IE11 speed up. – Anders Nov 08 '16 at 07:57
  • Would you mind pinging me on Gitter or sending me an email to ashley at ashleygrant.com I'd like to continue exploring this issue to see if there is something we can do in Aurelia to help IE11 perf. – Ashley Grant Nov 08 '16 at 15:58
2

I have posted an issue with the aurelia team https://github.com/aurelia/polyfills/issues/39 and a github project https://github.com/4nderss/aurelia-performance-test reproducing my issues.

Aurelia team closed the issue so there might not be any fix for IE11 for now.

Edit: The aurelia team found an issue and it is now fixed

Anders
  • 878
  • 1
  • 9
  • 20
  • Looks like there was some kind of issues with IE, aurelia team is working on a fix. – Anders Nov 15 '16 at 12:26
  • 1
    I'm gonna leave my answer since there's some good info still in there. Hopefully someone else will come and upvote your answer though to put it up top. – Ashley Grant Nov 18 '16 at 15:05