javascript - Angular 1.x 迁移性能问题

Question

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

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

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

谢谢!

编辑:

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

这是 Angular 1.3 中的样子

这是 Angular 1.6 中的样子

我在更新后收到强制回流性能警告。这(重新计算样式)也来自 angular-animate 的 computeCssStyles 函数(或者至少这是它引导我的代码行)。我也没有在我的代码中调用任何 $animate 。这只是 Angular 摘要方法的产物吗？迁移文档中是否还缺少有关摘要可能更改的任何内容？

代码示例: showDropdown 在悬停时从 false 变为 true，反之亦然。

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

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

$animate.enabled(false);

Answer 1

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

• 手动删除分离节点 - 继续删除分离对象。

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

• 在每次页面切换时，在 Angularjs Controller 中调用 destroy。还有 javaScript 对象 Reference to null

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

• 创建 Angular js 服务以将重要数据保存在内存中，以避免从 HTML5 存储系统中获取数据。

• 如评论中所述，使用 ng-if 而不是 ng-show。