Angularjs Really Slow At Rendering With About 2000 Elements?

Here's the fiddle: http://jsfiddle.net/D5h7H/7/ It renders the following:

{{group.Name}}

Solution 1:

In AngularJS 1.3+, there is One-time binding built-in:

The main purpose of one-time binding expression is to provide a way to create a binding that gets deregistered and frees up resources once the binding is stabilized. Reducing the number of expressions being watched makes the digest loop faster and allows more information to be displayed at the same time.

In order to make the one-time binding, prepend :: to the binding value:

<div>{{::name}}</div> 

Also see relevant discussions:

• Render value without data-binding
• How does data binding work in AngularJS?
• Genuinely stop a element from binding - unbind an element - AngularJS

Solution 2:

You should look at bindonce if you don't need to update the UI after the data has been bound to it. bindonce can also wait until an object has been loaded and then do the binding. It will save you a bunch of time and reduce your $watch()es dramatically when used right.

Solution 3:

That's due to how AngularJS does dirty checking. Here's a definitive answer to slow rendering with AngularJS.

Solution 4:

Using this project: angular-vs-repeat will boost up your performance.

With this, the browser will render (thus angular will do its dirty-checking) to only so many elements that fit in the scrollable container where you render the elements. Demo here

Solution 5:

I realize this is an old question but I don't think an answer has been posted yet.

I believe the reason your form is slow is not just that you have 2,000+ elements but that those elements are form elements using ng-model. The built in form validation in Angular is very powerful and convenient but can behave very slowly especially when you first load the form. If those 180(6x30) input elements used something like ng-checked instead of ng-model, avoiding form validation mechanism, then you form should load much faster.

<input type="checkbox" ng-checked="filter.enabled">{{filter.Name}}

Reducing watchers with one-time binding via :: will also help the situation but I think your main issue is with ng-model and angular form validation.

Share