5

我刚刚按照Angular 4 升级指南更新了我的 AngularJS 1.6 应用程序。基本上我在 Angular 4 中添加了新的 Angular 4 依赖package.json项，通过引导应用程序UpgradeModule并在 Angular 4 中创建了一个新的简单组件。一切都按预期工作，但性能真的很差！

该应用程序是一个仪表板应用程序，具有潜在的大量小部件组件和大量到后端的 http 请求以填充每个小部件内容。

根据仪表板的不同，升级后的应用程序加载和显示仪表板的速度要慢 2 到 5 倍，并且 chrome 网络控制台显示 http 请求是按顺序运行的，而不是像 1.6 版本那样一次性全部执行。总体而言，用户界面也不太流畅。

我已经玩过ngZone并尝试在角度之外运行请求，zone.runOutsideAngular(() => { ... })以减少由于更改检测而导致的刷新成本。结果比原来的 1.6 版本稍快，但仍然慢得多。

升级到混合 1.6-4 应用程序以保持出色的原始性能时，是否需要考虑一些事项？谢谢！

4

2 回答 2

3

我们正在使用混合应用程序。根据我们的测量，NG2 在初始 NG1 时间上增加了大约 20%。还不错，但是我们在配置混合后做了很多工作：1) - 捆绑而不是多次请求 NG2（感谢 CLI）2) - 用于产品的 AOT；JIT for dev 3) - Tree-shaking 4) - 条件填充（现代浏览器不需要任何填充，但它们对于旧浏览器是必需的）

我们也在尝试整合以下人员： 1) - 延迟加载。但我不确定它是否适用于混合应用程序 2) - Web Worker 将 NG2 移动到单独的线程。但是我仍然不确定它是否适用于混合应用程序 3) - 一些自定义检测更改策略

这是关于 NG2 性能的一个很好的清单。我希望它会帮助你。

于 2017-05-04T10:45:11.813 回答
2

我有混合应用程序 Ng1.5+Ng2.4.0。由于 2 个原因，我在混合模式下也遇到了 angular4 的性能问题。

  1. 这仅与调试有关，因为 ng4 执行额外的检查。在生产模式下（enableProdMode()在引导之前调用以将其打开）angular4 甚至比 ng2 快一点。

    import { enableProdMode } from '@angular/core';

    enableProdMode ();

  2. 如果 angularjs 中的任何监视表达式函数进行异步调用，则混合模式下的 Ng4 会安排摘要。即，如果您throttle在 angularjs watch 表达式中使用 lodash 函数来降低消化率，那么使用 Ng4 会导致相反的效果——消化会像滚雪球一样排队。

于 2017-05-31T13:26:19.553 回答