Angular 1.x migration performance issues

I am upgrading a huge angular 1 project from 1.3.x to 1.6.x because we require some patches in the latest version. After updating it seems that the entire application has slowed dramatically. I have been looking through the migration documentation but is there anything that could be causing major slow downs? Any bad code or gotchas that would cause this? I am having issues just with visual changes such as ng-show and ng-hide being slow and twitchy.

This is the CPU profile before upgrade:

This is the CPU profile after upgrade:

Thank you!

EDIT:

Let me give a little more context. I have a feeling this has to do with the digest cycle. For example, I a navbar where an icon will hide and another will show on hover.

Here is what it looks like in angular 1.3

Here is what it looks like in angular 1.6

I am getting a forced reflow performance warning after the update. Also this (recalculate style) is directed from angular-animate s computeCssStyles function (or at least that is the line of code it's directing me towards). I am also not calling any of $animate in my code. Is this just a product of the angular digest method? Also is there anything that I am missing from the migration docs about possible changes to digest?

Code example: showDropdown is changed from false to true on hover and visa versa.

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

1 Answers

Answers 1

Managing memory is difficult in JavaScript. Here are few best practices to improve the performance in terms of loading pages and freeing memory.

• Removing Detached Node manually - Work on to remove detached object.

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

• On every page switch, call destroy inside Angularjs controller. Also javaScript object Reference to null

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

• Create Angular js Service to keep important data in memory to avoid fetching from HTML5 storage system.

• As mentioned in comment, use ng-if instead of ng-show.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati