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,反之亦然.

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

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

$animate.enabled(false);

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.