AngularJS: {{ }} vs ng-bind

I was just curious about this discussion on stackoverflow and decided to do own test:

for(var i = 0; i < 100000; i++){
    randomKey = randomString();
    bigScope1[randomKey] = randomString();
    bigScope2[randomKey] = randomString();
    bigNgBindTempalte += '<div class="' + randomString() + '" ng-bind="'+ randomKey + '"></div>';
    bigExpressionTemplate += '<div class="' + randomString() + '">{{' + randomKey + '}}</div>';
  }
  
  // console.time('ngBind');
  // $compile('<div>' + bigNgBindTempalte + '</div>')(bigScope1);
  // console.timeEnd('ngBind');
 
  console.time('expression');
  $compile('<div>' + bigExpressionTemplate + '</div>')(bigScope2);
  console.timeEnd('expression');

code.

and indeed ngBind is faster,my machine for 100000 iterations shows:

ngBind: 46984.981ms
expression: 51107.555ms

It’s still not clear why the result are so weird when you run it together (one by one). But it’s another question.

Оптимизируем AngularJS. Подробный разбор.

Вольный перевод статьи “Improving Angular web app performance example“. Трактат довольно фундаментальный. Большая часть методик оценки производительности подойдет для любого веб-приложения (не только AngularJS).

Состоит из следующих разделов:

Continue reading