1

Ok so I have read in several places that using ng-bind is better for performance. But looking at these jsperfs makes me a bit confused :)

https://jsperf.com/angular-bind-vs-brackets

http://jsperf.com/ng-bind-vs-brackets/14

So what is the best way when it comes to performance?

{{::value}}

or

<div ng-bind="value"></div>
Mackelito
  • 4,213
  • 5
  • 39
  • 78
  • 4
    `ng-bind` is use for one-way-binding and `{{}}` is Two way binding. For one-way-bind - angular is not watching that variable to be change or not. But for two-way-binding - angular watching that variable to be change or not, and if value is change then angular reflect newValue to Html or JS. – gaurav bhavsar Sep 09 '15 at 08:32
  • So if we where to compare them more equally then {{::value}} is the best option when it comes to performance? – Mackelito Sep 09 '15 at 08:34
  • Maybe, but it doesn't look pretty displaying {{le value}} to the user for a split second when the template loads. So you should only ever use {{}} where it won't be visible to the user. – Chrillewoodz Sep 09 '15 at 08:36
  • Please note: "The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, **and to update the text content when the value of that expression changes**." ([ref](https://docs.angularjs.org/api/ng/directive/ngBind)) .Both `ng-bind` and `{{...}}` are one way updatable (watched) bindings, i.e. model -> view. Also note that the second jsperf compares `ng-bind` with `ng-model` - 2 different things. @Mackelito: I would suggest to test yourself in your specific case. It should be very simple. – Nikos Paraskevopoulos Sep 09 '15 at 08:41
  • @Chrillewoodz we are using ng-cloak so that is not a problem for us. – Mackelito Sep 09 '15 at 08:44
  • @NikosParaskevopoulos I have updated the test url :) – Mackelito Sep 09 '15 at 08:53
  • @Mackelite 2WayBinding angular call `$apply()` to start `$digestCycle` will check all `scope` variable which is `2WayBinding`. If you need to update value each time on any action then its better to use `2WayBinding`, but if there is not need to change value then you must have to use `ng-bind`. **Conclusion** : `ng-bind` is best when it comes to performance, **since its reduce digestCycle to watching changes in oldValue with newValue** – gaurav bhavsar Sep 09 '15 at 08:53
  • @gauravbhavsar: if we use {{::value}} instead? Take a look at the updated test and there is a huge difference. – Mackelito Sep 09 '15 at 08:56
  • Possible duplicate of [AngularJS : Why ng-bind is better than {{}} in angular?](http://stackoverflow.com/questions/16125872/angularjs-why-ng-bind-is-better-than-in-angular) – نرم افزار حضور و غیاب Feb 19 '17 at 12:42

3 Answers3

4

You should use ng-bind. Its a directive that puts a watcher on that variable so it only updates when the variable changes, while {{}} will dirty-check and refreshes the variable in every digest cycle.

See this answer

Also :: is called "bindonce" and will only set the variable once and wont update afterwards.

e: The jsperf tests binding from variable to html (I think), while the linked answer focuses on the behaviour afterwards. If you got 100 curly braces and you update one model, every {{}} gets updated. While ng-bind only updates if the variable itself changes, because it creates a watcher for that variable.

Community
  • 1
  • 1
CMR
  • 933
  • 1
  • 7
  • 8
  • The answer you link to is more than 1 year old.. is it really still valid? Care to comment on the jsperf tests?.. how come does that show that {{}} is quicker? – Mackelito Sep 09 '15 at 11:20
1

When it comes to one-time-binding, then you should also use the colon in ng-bind as well.

So use ng-bind="::value"

for filter or expressions you have to use brackets: ng-bind="::(value | number:2)"

EscapeNetscape
  • 2,892
  • 1
  • 33
  • 32
-1

use ng-bind is better . If javascript files is not loaded , {{ }} will show on the page .

momo
  • 185
  • 1
  • 6