Angular 材质性能不佳、内存占用量大和内存泄漏

Question

Angular 材质性能差，内存占用大：

Issue: When added md-input-container to a page, the number of $watchers increased from 6504 to 112507?, by total 17 times more than without the angular material tag* md-input-container 和 $mdDialog 都会导致内存泄漏 Angular Material 页面在 Chrome 中加载速度慢 4 倍，在 IE 中几乎无法加载 `预期的行为是什么？ 预计 Angular 材质应用程序的性能与仅 Angular 应用程序类似。

性能 仅 Angular 应用程序： Chrome：5.8 秒加载 500 条学生记录 1.4 秒加载 50 个学生记录 IE：24.98 秒加载 500 个学生记录 2.15 秒加载 50 个学生记录

Angular 材质应用程序： Chrome：20.86 秒加载 500 条学生记录 2.93 秒加载 50 个学生记录 IE：等待 1 小时无法加载 500 名学生。 等待 10 分钟无法加载 200 名学生 42.46 秒到 50 个学生记录 记忆片段： 1.一般来说，IE使用的内存是chrome的1.456倍 2. Chrome: angular Material 使用的内存是没有它的 2.26 倍 3. IE：Angular Material 使用的内存是没有它的 1.73 倍

内存泄漏： 当在视图中使用角度材料时，在 IE 中检测到两个视图之间的内存泄漏。 --switched views 23 倍内存在 IE 中增加了 26 MB $mdDialog 导致 Chrome 和 IE 中的内存泄漏 -- 打开和关闭对话框 31 次，Chrome 内存增加 27 MB，IE 内存增加 12 MB

我将代码上传到： github：https://github.com/gregyichang/MemoryLeak

Answer 1

如果我是你，我会尽可能使用Virtual Repeat 而不是 ng-repeat。 IE 尤其难以绘制大量具有波纹效果、阴影和其他内容的 Angular Material 元素。这应该会给您立即的性能提升。需要注意的是，所有行都需要具有相同的高度才能使用它。

我也只会在需要的地方使用layout 和flex。例如，您可以使用<div><span>A</span><span>B</span></div> 代替<div layout="row"><div>A</div><div>B</div></div>，也可以使用<div>A</div><div>B</div> 代替<div layout="column"><span>A</span><span>B</span>

最后，特别是对于 IE，您可以禁用许多导致其速度变慢的样式。请参阅on this issue 发布的 CSS，但请记住，其中一些类名称在发布后可能已更改。