2

I'm developping an angular app right now for my company, but I reached a point where the app became extremely slow so I tried tunning it by using onetimebind everywhere I can, track by ...but it's faster to load at first but still laggy, it is composed of a pretty much huge nested objects, I've counted the total number of objects, it starts at 680 and can go up to +6000 for normal use of the app, oh yeah I should precise that the app is generating a form and pretty much +90% of the objects in the scope belongs to an input and are updated each time the client click(radio) keyup/change(text).

It also have like 5/6 arrays composed of objects and the array gets bigger/smaller accodring to the clients choice, and that's where it gets laggy, each time I add an object to the array, it takes like a second to render it, so I tried using nested controllers thinking that if the child of an object is updated Angular will render only this child and not all the others, but somehow the app got even slower and laggier :s (it's a bit faster when I use ng-show instead of ng-if but the memory used jumps from ~50Mb to ~150Mb)

I should also precise that the form is in a wizard style, and not all the inputs are displayed at once, the number of inputs that are displayed are between 10%-20% of the total inputs

Has anyone encountred this problem before? does anyone know how to deal with big scopes?

Improve this question
14
  • 1
    "how to deal with big scopes" - separate them into nested elements (controllers, directives with isolated scope, etc) Commented Sep 14, 2015 at 3:55
  • Due to the 2-way data binding in Angular if you have 1,000's of objects the watching for changes will slow things down. Commented Sep 14, 2015 at 3:57
  • do all of the items need two way binding, or do they just need to be rendered once? There are some tricks for that Commented Sep 14, 2015 at 3:57
  • One thing you could do is to use ng-if at the wizard-page level - this should cut off the number of watchers to 10%-20%. Other things that contribute to slow performance are function watchers, like {{generateData()}} - make sure that if you have those, then they should not be much more than a simple getter - for example, no for-loops there. Lastly, make sure you don't have deep-watchers ($scope.$watch(..., true)) or large nested objects Commented Sep 14, 2015 at 4:08
  • "It also have like 5/6 arrays composed of objects and the array gets bigger/smaller according to the clients choice, and that's where it gets laggy, each time I add an object to the array, it takes like a second to render it" -- If your business logic is taking more time to (i.e. find,filter,search) generate new objects than in that case you can use loadsh.js,linq.js etc. according to your requirements, to generate and deal with it quickly.Thus,it will makes your new objects building fast and automatically your binding works smoothly. Commented Sep 14, 2015 at 4:32

1 Answer 1

Reset to default
1

Sad to say, but that's intrinsic of the view rendering in angular. An update in the model triggers a potential redraw of the entire view. No matter if you have elements hidden or not. The two way data binding can really kill performances. You can consider evaluate if you need to render the view only once, in that case there are optimizations, but I'm assuming that your form change dynamically, therefore a 2 way data binding is necessary.

You can try to work around this limitation but encapsulate sub part of the entire MVC. In this way a contained controllers only update the specific view associated to that scope.

You may want to consider using react (that has as first goal to address exactly your use case)

Have a look at this blog post for a comparison of the rendering pipeline between angular and react Js.

http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.