亲爱的Angular 2开发人员,
我和我的团队在角度2应用程序(2.1.1)中遇到了一个奇怪的性能问题。我们正在使用基于golden-layout.js(https://golden-layout.com/)的停靠布局。它运行得非常好,并且拖放动作可以顺利渲染。
然而,当我们有很多角度组件时(比方说,一个带有大约2500个元素的* ngFor,每个元素都是一个带有2个属性绑定的简单组件),黄金布局的行为很奇怪: 当我们单击一个角度组件然后开始拖动时,拖动动作会呈现出巨大的尖峰。但是,当我们点击浏览器中的空白区域(不是任何角度组件的HTML)然后开始拖动时,动画就会顺利运行。
我们所有的组件都使用ChangeDetectionStrategy.OnPush,并且在可能的情况下,分离ChangeDetectors并手动触发更新。 当这个聚焦元素是一个角度分量时,我们怀疑有角度可以将最后一个聚焦的组件保留在内存中,并执行大量的更新动画。
这个问题可能来自何处或我们应该搜索什么?由于我们看到当我们点击任何角度组件之外时渲染确实正常,因此必须有一个原因,但我们无法想到正确诊断问题的方法。
感谢您的帮助。
编辑:我创建了plunkr:
placeholder (sorry, cannot just post relevant portion)
该现象可以重现如下:
初始状态:拖动任何简单组件。动画应该很流畅。 Spikes :在Complex组件内部(包含5000个元素)。然后拖动。动画应该用很少的帧渲染。 修复:双击任意简单组件,然后单击一下,然后再次尝试拖动。动画应该再次流畅。
修复也可以通过在简单组件中随机点击来实现,我们还没有弄清楚整个事情背后的逻辑。但是,双击然后单击即可(至少在几台64位Windows 10计算机上的最新Chrome中)。