Kendo 网格在 IE11 中的性能缓慢

Question

我一直在为 ASP.NET MVC 使用最新的 Kendo 网格。

数据table规格是这样的，

columns --> 25 to 35.

rows --> anywhere between 1500 to 5000.

client side paging --> 20 rows

问题是，当我进行滚动时，IE 11 最多需要 1 秒来显示数据，具体取决于屏幕分辨率和网格内容高度。这会导致 UI 故障。

当我从 Dev Tools 运行 IE UI 响应时，我得到了以下结果。

我知道每当用户滚动时，浏览器都必须呈现行，这需要一点时间。但 IE 11 将其提升到了一个全新的水平。它必须再处理 3-4 行的那一刻，它开始表现得神经质和故障。

我在 Chrome (& opera), Firefox 中进行了测试。其中表现非常不错

我尝试使用折射器 CSS 来减少造型，但我能承受的变化很小。

请告诉我下一步是什么？我应该保持冷静并责怪IE吗？

Answer 1

网格在 IE11 中独立运行良好，我的团队使用它。可能是您添加了一些执行过度的代码。

UI 响应工具不是很有用。尝试使用 IE 开发工具中的探查器。打开其中有问题网格的页面，点击分析器的绿色箭头开始记录，滚动网格一点，然后在分析器中点击停止。

按计数、包含时间和独占时间对结果进行排序，看看哪些突出。每次排序后，查看您编写的代码的前 ~50 个条目。
在按计数排序的时候，你可能会发现一段代码虽然很短，但因为一个简单的错误就无缘无故地循环了几十万次。
按时间排序可以显示要求很高的代码片段，也许可以移到其他地方。

例如，您可能运行视图中的一些逻辑，例如格式化日期。如果您在分析器中看到这样的功能，最好将此逻辑移至呈现视图之前的数据获取阶段。

Answer 2

名为 angular-material.css 的文件存在问题，会导致如您所述的缓慢滚动。我见过几个地方，比如 this one，说明删除文件或其中的几行解决了问题。

您在项目中使用 angular 吗？如果有，请查看是否有此文件并尝试将其删除。

Answer 3

因为这个问题的浏览量超过了 1000，所以我有义务回答我是如何解决我的问题的。

事实证明，当涉及 HD/FHD 分辨率的大屏幕时，IE 的渲染速度很慢。因此，我遵循的解决方案是通过将以下内容添加到网格的 CSS class.

来将网格提升到新层

.promote-new-layer{
    transform: rotate(0deg);
    will-change: transform;
}

will-change 可能不适用于所有浏览器。因此后备方案是使用 transform:rotate(0deg).

请确保这样做时，您没有提升不必要的节点。

Slow performance of Kendo Grid in IE11