Question

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

数据表规格是这样的，

列 - ＆gt; 25至35岁。

行 - ＆gt;在1500到5000之间的任何地方。

客户端分页 - ＆gt; 20行

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

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

每当用户滚动浏览器时，浏览器必须渲染行并且需要一些时间。但是IE 11将它带到了一个全新的高度。它必须处理3-4行的那一刻，它开始出现跳跃和毛刺。

我在Chrome（＆amp; opera），Firefox中进行了测试。性能非常好。

我试图折射CSS以减少样式，但是我能承受的改变很小。

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

Answer 1

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

UI响应工具并不是非常有用。尝试在IE的开发工具中使用分析器。打开包含有问题网格的页面，点击探查器的绿色箭头开始录制，稍微滚动网格，然后在探查器中点击停止。

按计数，包含时间和独家时间对结果进行排序，看看有什么突出的。在每次排序之后，查看您编写的代码的前50个条目当按Count排序时，您可能会发现一段代码虽然很短，但由于一个简单的错误，它无缘无故地循环运行了数十万次。
按时间排序可以显示非常苛刻的代码片段，也许可以移动到其他地方。

例如，可能是您在视图上运行某些逻辑，例如格式化日期。如果在分析器中看到这样的函数，最好在渲染视图之前将此逻辑移动到数据获取阶段。

Answer 2

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

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

Answer 3

由于该问题已超过1000次，我必须回答如何解决问题。

结果是，在更大的HD / FHD分辨率屏幕上，IE的渲染速度很慢。因此，我遵循的解决方案是通过将以下内容添加到网格的CSS类中来将网格提升到新的层。

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

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

请确保这样做时不会提升不必要的节点。