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

Question

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

code

在这个 plunker 示例中，我们在 chrome 中总共得到 68 毫秒来渲染整个 table。在 IE11 中，我们得到 280 毫秒，每行渲染速度提高了 100%。 chrome 每毫秒最多执行 3 行，而 IE 每 2 毫秒执行一次。

这个 plunkr 是我们应用程序的基本模型。在我们的应用程序中，我们重复以下模板，该模板要重得多。它涉及样式计算和 show/hide 绑定，具体取决于用户设置和权限级别。

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

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

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

在 IE11 中每行大约需要 30 毫秒，

为什么 IE11 在使用 aurelia 模板时表现如此糟糕？我们可以做些什么来提高 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>

那么我桌面上最后一行的绘制时间是 278 ms 在 IE 11 上 Window 10。请看这里：plunkr

Answer 2

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

Aurelia 团队已解决此问题，因此目前可能没有针对 IE11 的任何修复。

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

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

Repeating with custom elements performance issues in IE

aurelia

aurelia-templating