重复 IE 中的自定义元素性能问题答案

【问题标题】：Repeating with custom elements performance issues in IE重复 IE 中的自定义元素性能问题
【发布时间】：2016-11-18 19:07:54
【问题描述】：

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

Plunker Example

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 中无法正常工作的自定义元素中执行某些操作。由于模板很大，我们想要自定义元素，因为它具有可重用性和代码管理。

【问题讨论】：

你在用 bluebird 做承诺吗？
是的，蓝鸟：3.4.6

标签： aurelia aurelia-templating

【解决方案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>

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

【讨论】：

我现在也更新了我的 plunkr。我不明白你的回答如何帮助我们的案例，它在你的 plunkr 上的速度相同。但仍然存在 IE10 慢得多的事实。 IE10和aurelia没有办法提高性能吗？在我们的实际应用程序中，我们已经使用了最新版本的 aurelia。我与 angular2 做了一个小比较，没有转换整个东西plnkr.co/edit/7VGTXg4MQ6QIN1ZJ0eqx?p=preview 有趣的是，angular2 似乎在第一行渲染后的 10 毫秒内渲染每一行（这更慢）。但总体速度更快。
我真的觉得我们在这里比较苹果和橘子。 Aurelia 和 NG2 操作 DOM 的方式完全不同，这可以通过计时器的不同来说明。 Angular 2 有自己的 JavaScript HTML 解析器，并不像 Aurelia 那样直接使用 DOM。所以你的 NG2 代码报告的时间不是“诚实的”。
我希望我们有办法同时运行这两个 plunkrs。反复。我反复说 b/c 我看到两个版本在 IE10/Win7 VM 中重复运行时报告的运行时间大不相同。话虽这么说，Aurelia 和 Angular 2 在 IE 10 中的首次渲染似乎都运行得很慢。我将尝试一些东西来看看感知速度如何变化。
另外，为什么 Aurelia plunkr 使用路由器，而 NG2 没有？
我认为导致代码运行缓慢的很大一部分原因是时间获取器本身。有趣的是，当我尝试创建一个“切换”按钮时，时间获取器实际上在开发模式下破坏了 Angular 2。我已经联系了我在他们团队中的联系人，看看是否有办法在不进入 Prod 模式的情况下解决这个问题。

【解决方案2】：

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

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

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

【讨论】：

看起来 IE 存在某种问题，aurelia 团队正在努力解决。
我会留下我的答案，因为那里还有一些很好的信息。希望其他人会来支持你的答案，尽管把它放在首位。