Aurelia 使用自定义元素重复IE中的性能问题
IE10/11存在一些性能问题。下面的plunker解释了使用自定义元素重复表行时性能下降的一些原因 在这个plunker示例中，我们在chrome中总共得到68毫秒来渲染整个表。 在IE11中，我们得到了280ms，每行的渲染速度提高了100%。而chrome每毫秒最多可以做3行，IE每2ms做一行 这个plunkr是我们应用程序的基本模型。在我们的应用程序中，我们重复下面的模板，它要重很多。它涉及样式计算和显示/隐藏绑定，具体取决于用户设置和权限级别 它是用瑞典语写的，所以不要介意正文。 第二行（扩展信息）是if.bound，因此最初不绘制它 在我们的应用程序中，如果我们渲染一个包含100行模板的视图，chrome将在587毫秒内渲染整个表。IE11将在3779毫秒内渲染。Edge使用1283毫秒，Firefox使用909毫秒 在IE11中，每行大约需要30毫秒 有什么理由IE11在使用aurelia模板时表现会差得多？我们可以做些什么来提高IE渲染速度？我曾尝试将绑定设置为oneTime，但效果不太好。您是否应该避免在自定义元素中执行与重复和IE不兼容的操作。Aurelia 使用自定义元素重复IE中的性能问题,aurelia,aurelia-templating,Aurelia,Aurelia Templating,IE10/11存在一些性能问题。下面的plunker解释了使用自定义元素重复表行时性能下降的一些原因 在这个plunker示例中，我们在chrome中总共得到68毫秒来渲染整个表。 在IE11中，我们得到了280ms，每行的渲染速度提高了100%。而chrome每毫秒最多可以做3行，IE每2ms做一行 这个plunkr是我们应用程序的基本模型。在我们的应用程序中，我们重复下面的模板，它要重很多。它涉及样式计算和显示/隐藏绑定，具体取决于用户设置和权限级别 它是用瑞典语写的，所以不要介意正文。
由于模板非常大，我们需要定制元素，因为它具有可重用性和代码管理 确保您使用的是最新版本的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>
奥雷利亚
加载。。。
需要（['aurelia-bootstrapper']）；
然后，我的桌面上最后一行的绘制时间是
278 ms<!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>
奥雷利亚
加载。。。
需要（['aurelia-bootstrapper']）；
然后，我的桌面上最后一行的绘制时间是
278 ms编辑：aurelia团队发现了一个问题，现在已经解决了我已经向aurelia团队发布了一个问题 还有一个github项目重现了我的问题 Aurelia团队解决了这个问题，因此IE11目前可能没有任何修复方案
编辑：aurelia团队发现了一个问题，现在已经解决了您是否使用蓝鸟作为承诺？是的，我们使用蓝鸟：3.4.6您是否使用蓝鸟作为承诺？是的，我们使用蓝鸟：3.4.6我现在也更新了我的plunkr。我不明白你的回答对我们的情况有什么帮助，它在你的弹射机上的速度是一样的。但仍然有一个事实，IE10要慢得多。没有办法提高IE10和aurelia的性能吗？在我们的实际应用程序中，我们已经使用了最新版本的aurelia。我与angular2进行了一个小的比较，但没有转换整个内容。有趣的是，angular2似乎在渲染第一行后的10毫秒内渲染每一行（速度较慢）。但总的来说速度更快。我真的觉得我们在比较苹果和桔子。Aurelia和NG2操纵DOM的方式完全不同，这可以从计时器的不同中看出。Angular 2有自己的JavaScript HTML解析器，并不像Aurelia那样直接使用DOM。所以你的NG2代码报告的时间是不“诚实的”。我希望我们有办法同时运行这两个Plunkr。反复地我反复说b/c我看到两个版本在IE10/Win7虚拟机中重复运行时报告的运行时间大不相同。这就是说，在IE 10中，Aurelia和Angular 2在第一次渲染时似乎运行得非常慢。我将玩一些东西来看看感知的速度是如何变化的。还有，为什么Aurelia plunkr使用路由器，而NG2不使用？我认为让代码运行缓慢的一个主要原因是时间获取器本身。有趣的是，当我试图创建一个“切换”按钮时，time getter实际上在dev模式下破坏了Angular 2。我已经联系了他们团队中的联系人，看看是否有办法修复进入Prod模式的w/o。我现在也更新了我的plunkr。我不明白你的回答对我们的情况有什么帮助，它在你的弹射机上的速度是一样的。但仍然有一个事实，IE10要慢得多。没有办法提高IE10和aurelia的性能吗？在我们的实际应用程序中，我们已经使用了最新版本的aurelia。我与angular2进行了一个小的比较，但没有转换整个内容。有趣的是，angular2似乎在渲染第一行后的10毫秒内渲染每一行（速度较慢）。但总的来说速度更快。我真的觉得我们在比较苹果和桔子。Aurelia和NG2操纵DOM的方式完全不同，这可以从计时器的不同中看出。Angular 2有自己的JavaScript HTML解析器，并不像Aurelia那样直接使用DOM。所以你的NG2代码报告的时间是不“诚实的”。我希望我们有办法同时运行这两个Plunkr。反复地我反复说b/c我看到两个版本在IE10/Win7虚拟机中重复运行时报告的运行时间大不相同。这就是说，在IE 10中，Aurelia和Angular 2在第一次渲染时似乎运行得非常慢。我要