Angular 1.x迁移性能问题

Question

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

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

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

谢谢！

编辑：

让我再说一点。我觉得这与摘要周期有关。例如，我是一个导航栏，其中一个图标将隐藏，另一个将在悬停时显示。

这是角度1.3中的样子

这是角1.6的样子

我在更新后收到强制回流性能警告。此（重新计算样式）也是从角度动画的computeCssStyles函数（或者至少是它引导我的代码行）引导的。我也没有在我的代码中调用任何$ animate。这只是角度消化方法的产物吗？还有一些我在迁移文档中遗漏的关于可能对摘要进行更改的内容吗？

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

$animate.enabled(false);

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

r

Answer 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。