Question

IE10 / 11有一些性能问题。以下plunker解释了我们在使用自定义元素重复表行时的一些降级性能。

code

在这个plunker示例中，我们总共获得了68毫秒的chrome来渲染整个表格。在IE11中，我们获得了280毫秒，并且每行渲染速度提高了100％。虽然chrome每行最多3行，但IE每2ms执行一次。

此plunkr是我们应用程序的基本模型。在我们的应用程序中，我们重复以下模板，该模板更重。它涉及样式计算和显示/隐藏绑定，具体取决于用户设置和权限级别。

这是瑞典语，所以不要介意文本。

第二行（扩展信息）是if.bound所以它最初没有绘制。

在我们的应用程序中，如果我们使用100行模板渲染视图，则chrome会在587毫秒内呈现整个表格。 IE11在3779ms完成。 Edge在1283ms，Firefox 909ms。

每一行在IE11中大约需要30ms，

是否有任何理由IE11应该使用aurelia-template执行得更糟？我们可以做些什么来提高IE渲染速度？我已经尝试将绑定设置为oneTime，但这并没有做太多。是否有一些东西应该避免在自定义元素中进行，而这些元素在重复和IE时效果不佳。由于模板非常大，我们需要自定义元素，因为可重用性和代码管理。

Answer 1

确保您使用的是Aurelia的最新版本，如果您需要支持IE或旧版本的Edge，请确保您使用Bluebird，因为他们的Promise实现非常糟糕。

如果用以下内容替换Plunkr中的index.html：

<!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>

然后我桌面上最后一行的绘制时间是{10}在IE 10的窗口10中。请参见：plunkr

Answer 2

我在aurelia团队发布了一个问题 https://github.com/aurelia/polyfills/issues/39和github项目https://github.com/4nderss/aurelia-performance-test重现我的问题。

Aurelia团队关闭了这个问题，因此目前可能没有针对IE11的任何修复。

编辑：aurelia团队发现了一个问题，现在已经修复了

在IE中重复自定义元素性能问题

2 个答案: