IE11 中的绘制时间
Paint time in IE11
我将 ag-grid 与 angular 4 一起使用。我发现一个问题，即在不同的上下文中，IE11 中的绘制时间要长得多。在一个例子中，我有一个非常基本的 uneditable table 有 10 - 15 行，没有滚动或任何东西。当我将鼠标悬停在 table 上时，帧率开始下降。性能分析我可以看到绘制事件发生得非常频繁，需要 200 - 400 毫秒才能完成。
在具有超过 3000 条记录的全屏搜索模式中使用相同的 table 组件，绘制事件发生的频率要低得多，并且只持续几毫秒。我看到的最长的绘画事件大约是 20 毫秒。
我从哪里开始呢？我可能会寻找哪些东西来弄清楚 angular 组件的上下文如何影响它的绘制速度？
我找到了解决办法。事实证明，IE11 中存在一个错误，导致溢出元素的渲染性能非常差：隐藏，并且 border-radius > 0。我的解决方案是从父元素中删除边框半径 div .
错误报告如下：
这是帮助我解决此问题的另一个堆栈溢出 post：
How does overflow: hidden; & border-radius on a container cause massive slowdowns to "Paint / Render Layer" within container, only on IE?
我将 ag-grid 与 angular 4 一起使用。我发现一个问题，即在不同的上下文中，IE11 中的绘制时间要长得多。在一个例子中，我有一个非常基本的 uneditable table 有 10 - 15 行，没有滚动或任何东西。当我将鼠标悬停在 table 上时，帧率开始下降。性能分析我可以看到绘制事件发生得非常频繁，需要 200 - 400 毫秒才能完成。
在具有超过 3000 条记录的全屏搜索模式中使用相同的 table 组件，绘制事件发生的频率要低得多，并且只持续几毫秒。我看到的最长的绘画事件大约是 20 毫秒。
我从哪里开始呢？我可能会寻找哪些东西来弄清楚 angular 组件的上下文如何影响它的绘制速度？
我找到了解决办法。事实证明，IE11 中存在一个错误，导致溢出元素的渲染性能非常差：隐藏，并且 border-radius > 0。我的解决方案是从父元素中删除边框半径 div .
错误报告如下：
这是帮助我解决此问题的另一个堆栈溢出 post：
How does overflow: hidden; & border-radius on a container cause massive slowdowns to "Paint / Render Layer" within container, only on IE?