Angular 1.x迁移性能问题

我正在将一个巨大的angular 1项目从1.3.x升级到1.6.x，因为我们需要最新版本中的一些补丁。更新后，似乎整个应用程序已经急剧放缓。我一直在浏览迁移文档，但有什么可能导致重大的缓慢下降？任何不好的代码或陷阱会导致这种情况？我遇到的问题仅仅是视觉上的变化，比如ng-show和ng-hide缓慢而棘手。Angular 1.x迁移性能问题

这是升级前的CPU简介：

这是CPU的profile升级后：

谢谢！

编辑：

让我给多一点背景。我有一种感觉，这与消化周期有关。例如，我是一个导航栏，图标将隐藏，另一个将显示在悬停上。

这里是什么样子的角1.3

这里是什么样子的角1.6

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

代码示例： showDropdown在悬停时从false更改为true，反之亦然。因为我不使用短期修复动画在我的代码的任何地方，但它似乎被解雇按照较新的角度摘要方法：

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

编辑。我只是将动画作为部分短期修复来使用。

$animate.enabled(false);

来源

2017-03-17 Alexg2195

我知道这可能需要时间，但使用ng-if代替ng-show/hide怎么办？如果你隐藏了指令，它们仍然会以ng运行 - 如果它们不会被编译，除非必要 - 这在运行时被隐藏的时候更少。另外，你的意思是哪些视觉变化？如果您只显示/隐藏图像，您的模型是否需要评估？也许你可以做一些工作，所以消化周期不被解雇 –

@ Gonzalo.-我会给ng - 如果试试。我将不得不通过很多指令来改变这一点。我所说的视觉变化与导航栏一样简单。我们有两个不同的图标可以隐藏和显示变量。 '纳克放映=“！showDropdown”纳克放映=“showDropdown”' 当showDropdown变量改变它同时显示的一瞬间，然后隐藏其他。 – Alexg2195

这个问题不可能被回答。它需要一个可以复制问题的例子。涉及视觉部件的事实从字面上说没有任何意义。他们只是更新摘要。当然，他们会暴露滞后 - 因为它们是可视的。 – estus

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

手动删除分离节点 - 着手删除分离的对象。

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

在每一个页面切换，通话破坏Angularjs控制器内。此外JavaScript对象参考null

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

创建角度JS服务，以保持重要的数据在内存中，避免HTML5存储系统获取。
正如在评论中提到的，使用ng-if而不是ng-show。

来源

2017-03-27 11:57:19 Vish

Angular 1.x迁移性能问题

回答

相关问题