Angular 1.x 迁移性能问题答案

【问题标题】：Angular 1.x migration performance issuesAngular 1.x 迁移性能问题
【发布时间】：2017-08-09 12:22:04
【问题描述】：

我正在将一个巨大的 angular 1 项目从 1.3.x 升级到 1.6.x，因为我们需要最新版本中的一些补丁。更新后，整个应用程序似乎已大大减慢。我一直在查看迁移文档，但是否有任何可能导致严重减速的情况？任何会导致这种情况的错误代码或陷阱？我只是在视觉变化方面遇到问题，例如 ng-show 和 ng-hide 缓慢而抽搐。

这是升级前的 CPU 配置文件：

这是升级后的 CPU 配置文件：

谢谢！

编辑：

让我提供更多背景信息。我觉得这与消化周期有关。例如，我是一个导航栏，其中一个图标将隐藏，另一个图标将在悬停时显示。

这是 Angular 1.3 中的样子

这是 Angular 1.6 中的样子

更新后我收到强制回流性能警告。此外，这个（重新计算样式）是从 angular-animate 的 computeCssStyles 函数（或者至少这是它指向我的代码行）定向的。我也没有在我的代码中调用任何 $animate 。这只是角度摘要方法的产物吗？另外，迁移文档中是否遗漏了有关摘要可能发生的变化的任何内容？

代码示例： showDropdown 在悬停时从 false 更改为 true，反之亦然。

<i> ng-show="! showDropdown" </i><i> ng-show="showDropdown" </i>

编辑：短期修复，因为我没有在我的代码中的任何地方使用动画，但它似乎是按照更新的角度摘要方法触发的。我只是禁用动画作为部分短期修复。

$animate.enabled(false);

【问题讨论】：

我知道这可能需要一些时间，但是使用 ng-if 代替 ng-show/hide 怎么样？如果你隐藏指令，它们仍然会运行，如果它们不会被编译，除非有必要——那就是在运行时隐藏时更少的手表。另外，您指的是哪些视觉变化？如果您只是显示/隐藏图像，是否需要评估您的模型？也许你可以做一些工作，这样消化周期就不会被触发
@Gonzalo.- 我会试试 ng-if。我只需要在很多指令中改变它。我所说的视觉变化就像导航栏一样简单。我们有两个不同的图标，它们根据变量隐藏和显示。 <i> ng-show="! showDropdown" </i><i> ng-show="showDropdown" </i> 当 showDropdown 变量发生变化时，它会在瞬间显示两个，然后隐藏另一个。
这个问题不太可能得到回答。它需要一个可以复制问题的示例。涉及视觉部分的事实实际上并没有说明什么。它们只是在摘要上更新。当然，它们会暴露滞后——因为它们是可视的。
能否请您提供plunker或fiddle，以便我们找到根本原因。可能有很多原因一定会降低您的应用程序性能。一个简单的示例是在您实际上需要一次性绑定的情况下不必要地使用双向数据绑定。您可以安装一个名为 batarang 的 chrome 扩展程序来实际检查被触发的摘要周期数，以及在您的应用中注册了多少观察者。
@Pramod_Para batarang 扩展似乎只是在启用时使应用程序崩溃，当我有更多时间时，我会更多地研究它。观察者的数量在2000左右......取决于什么页面。我不认为我个人能够准确地为这种规模的性能问题创造一个小提琴。

标签： javascript angularjs performance

【解决方案1】：

在 JavaScript 中管理内存很困难。以下是一些在加载页面和释放内存方面提高性能的最佳实践。

手动移除分离的节点 - 继续移除分离的对象。

var myNode = document.getElementById("bodyPanel");
  if(myNode !== null){
    while (myNode.firstChild) {
    myNode.removeChild(myNode.firstChild);
  }
}

在每次页面切换时，在 Angularjs 控制器中调用destroy。还有javaScript对象引用null

$scope.$on("$destroy",function() {
  $window.off("resize.Viewport");
});

创建 Angular js 服务，将重要数据保存在内存中，避免从 HTML5 存储系统中获取。
如评论中所述，使用ng-if 而不是ng-show。

【讨论】：