1

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

Plunker 示例

code

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

这个 plunkr 是我们应用程序的基本模型。在我们的应用程序中，我们重复以下模板，该模板要重得多。它涉及样式计算和根据用户设置和权限级别显示/隐藏绑定。

它是瑞典语，所以不要介意文字。 例子

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

在我们的应用程序中，如果我们渲染一个包含 100 行模板的视图，chrome 会在 587 毫秒内渲染整个表格。IE11 在 3779 毫秒内完成。Edge 用了 1283 毫秒，而 Firefox 用了 909 毫秒。

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

IE11 使用 aurelia-template 表现得这么差有什么原因吗？我们可以做些什么来提高 IE 渲染速度？我曾尝试将绑定设置为 oneTime，但这并没有起到多大作用。您是否应该避免在重复和 IE 中无法正常工作的自定义元素中执行某些操作。由于模板很大，我们想要自定义元素，因为它具有可重用性和代码管理。

4

2 回答 2

2

确保您使用的是最新版本的 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>

然后我桌面上最后一行的绘制时间278 ms在 IE 11 上的 Window 10 中。请参见此处：plunkr

于 2016-11-04T22:40:50.847 回答
2

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

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

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

于 2016-11-14T07:32:50.403 回答