Currently, I am working on an Angular app for my company and have encountered a major issue. The app has become extremely slow, even after trying to optimize it using techniques like onetimebind and track by. Despite initial improvements, the performance is still lagging due to the presence of a large number of nested objects. To give you an idea, there are around 680 objects initially and this number can go up to over 6000 during regular use. Most of these objects belong to input fields which are constantly updated whenever the user interacts with them (clicks, types, etc.).
In addition to these objects, there are multiple arrays containing objects that dynamically change based on user choices. Adding new objects to these arrays significantly slows down the rendering process, even though I attempted using nested controllers to optimize updates at the child level. Surprisingly, this approach made the app even slower. Using ng-show instead of ng-if did show a slight improvement in speed but led to a sharp increase in memory consumption.
It's worth mentioning that the form follows a wizard style layout where only a subset of inputs is displayed at any given time, typically ranging from 10% to 20% of the total inputs available.
Has anyone faced similar challenges before? Any suggestions on how to manage large scopes efficiently?