css - AngularJS 应用程序中的 IE "Style Calculation"性能非常慢

Question

我有一个使用 Angular Material 和从外部 API 加载的数据的 AngularJS 应用。

这个应用程序没有什么特别的突破，我的所有测试在 Chrome、Firefox 和 Safari 中都运行得非常好。

但是，当我使用 Internet Explorer 时，一切都变得一团糟。该应用程序非常慢，CSS 动画非常滞后，该应用程序完全无法使用。

我花了一天的时间尝试了一些潜在的错误修复和调试，但我取得了胜利。

我能看到的东西:

• 当我使用 IE11 的开发人员工具并运行性能日志时，到目前为止，“样式计算”占用的时间最多。
• 当我使用通配符 CSS 选择器时性能会变慢(比如 *{box-sizing: border-box})

这是性能检查器的输出，实际上我所做的只是向下滚动 md-virtual-repeat:

如您所见，样式计算在这里占用了大量时间。

谷歌搜索已经找到了解决方法。这里发生了什么？这是一个转移注意力的问题吗，问题出在我的应用程序的其他地方(我的 JS 和我想的一样高效，而且我还测试了没有加载真实数据，只有 30 个静态对象加载到虚拟中继器中 -结果是一样的)。

Answer 1

我在滚动并将 CPU 加载到 100%(IE11、Win10)时花费大约 700 毫秒的“样式计算”遇到了同样的问题

在我的特殊情况下，它是由包含“+”选择器的 CSS 规则引起的，例如

.menu li + li a {border: 0}

删除后 - 工作正常。

希望它可以节省几个小时。