Kensho financial insight

Boston / NYC / SF

Kensho        Angular

Improving Angular web app performance

Make your app faster

• Upgrade Angular version

• Minimize number of watchers

• Use `track by`

• Precompute filter expressions

• Limit DOM to visible elements

AngularJS performance lessons

How to approach the performance optimization?

Kensho        Angular

PRIMES !!!

Kensho        Angular

bahmutov/primes

"Finding 1000 primes takes a long time ..."

- client

Angular from browser console

CHROME > DEVTOOLS > SOURCES > SNIPPETS

bahmutov/code-snippets

How long does digest take?

ng-idle-apply-timing.js

Your application should have "ports" for performance diagnostics

Kensho        Angular

i.e. Async methods should return / store a promise on the scope

Kensho        Angular

console.profile('action');
$q.when(scope.foo())
  .finally(function () {
    console.profileEnd('action');
  });

Kensho        Angular

bahmutov/code-snippets

Extra code for message-passing actions

Angular performance testing via ports

Angular 1.x - 15 seconds

React - 0.5 seconds

Idle digest cycle 15ms

ng-idle-apply-timing.js

Why so many digest cycles?

$scope.cellClicked = function() {
    // Simulate an AJAX request:
    $timeout(function() {
        $scope.status.searchResults = ...;
    }, randomMillis());
}

$scope.cellClicked = function() {
    // Simulate an AJAX request:
    $timeout(function() {
        $scope.status.searchResults = ...;
    }, randomMillis(), false);
}

Do not run digest after each $http

$http.useApplyAsync(true);

bahmutov/angular_react_directive_example

glebbahmutov.com/blog/angular-plus-react-equals-speed-revisited/

Angular grid load: 650ms

React grid load: 150ms

<tr ng-repeat="hour in hours">
    <td ng-repeat="day in days">
        <my-calendar-cell hour="{{hour}}" 
            day="{{day}}"></my-calendar-cell>
    </td>
</tr>

"Without the included ng-repeat Angular 1 would be hailed as the fastest Web framework ever"

- me

Standard ng-repeat tricks

<tr ng-repeat="hour in ::hours track by $index">
    <td ng-repeat="day in ::days track by $index">
        <my-calendar-cell hour="{{::hour}}" 
            day="{{::day}}"></my-calendar-cell>
    </td>
</tr>

boom-repeat

<tr boom-repeat="hour in hours">
    <td boom-repeat="day in days">
        <my-calendar-cell hour="{{hour}}" 
            day="{{day}}"></my-calendar-cell>
    </td>
</tr>

bahmutov/boom-repeat

Do not attach the list to the DOM until all items are ready

demo glebbahmutov.com/angular-in-web-worker/

code bahmutov/angular-in-web-worker

how glebbahmutov.com/blog/run-angular-in-web-worker/

Hey, do your part!

bahmutov/angular-in-web-worker branch pass-app

Load

Rendering parts in N workers

<ul class="list">
  <li class="person">
    <div class="first">John</div>
    <div class="last">Smith</div>
    <img class="avatar" src="..." />
  </li>
  <li class="person">
    <div class="first">Mary</div>
    <div class="last">Smith</div>
    <img class="avatar" src="..." />
  </li>
</ul>

Static prototype

Making an Angular app

<ul class="list">
  <li class="person">
    <div class="first">John</div>
    <div class="last">Smith</div>
    <img class="avatar" src="..." />
  </li>
  <li class="person">
    <div class="first">Mary</div>
    <div class="last">Smith</div>
    <img class="avatar" src="..." />
  </li>
</ul>

<ul class="list">
  <li ng-class="..." ng-repeat="person in people">
    <div ng-class="...">{{ person.first | ... }}</div>
    <div ng-class="last">{{ person.last | ... }}</div>
    <img ng-class="..." ng-src="..." />
  </li>
</ul>

Live application

Making an Angular app

<ul class="list">
  <li class="person">
    <div class="first">John</div>
    <div class="last">Smith</div>
    <img class="avatar" src="..." />
  </li>
  <li class="person">
    <div class="first">Mary</div>
    <div class="last">Smith</div>
    <img class="avatar" src="..." />
  </li>
</ul>

<ul class="list">
  <li ng-class="..." ng-repeat="person in people">
    <div ng-class="...">{{ person.first | ... }}</div>
    <div ng-class="last">{{ person.last | ... }}</div>
    <img ng-class="..." ng-src="..." />
  </li>
</ul>

First performance optimization

<ul class="list">
  <li ng-class="computed" ng-repeat="person in people track by person.id">
    <div ng-class="first-computed">{{:: person.first-computed }}</div>
    <div ng-class="last-computed">{{:: person.last-computed }}</div>
    <img ng-class="..." ng-src="..." />
  </li>
</ul>

Making an Angular app

<ul class="list">
  <li class="person">
    <div class="first">John</div>
    <div class="last">Smith</div>
    <img class="avatar" src="..." />
  </li>
  <li class="person">
    <div class="first">Mary</div>
    <div class="last">Smith</div>
    <img class="avatar" src="..." />
  </li>
</ul>

<ul class="list">
  <li ng-class="..." ng-repeat="person in people">
    <div ng-class="...">{{ person.first | ... }}</div>
    <div ng-class="last">{{ person.last | ... }}</div>
    <img ng-class="..." ng-src="..." />
  </li>
</ul>

Second performance optimization

<ul class="list">
  <li ng-class="computed" ng-repeat="person in people track by person.id">
    <div ng-class="first-computed">{{:: person.first-computed }}</div>
    <div ng-class="last-computed">{{:: person.last-computed }}</div>
    <img ng-class="..." ng-src="..." />
  </li>
</ul>

// no need to run global digest
$timeout(..., ms, false);
// combine digests after HTTP
$http.useApplyAsync(true);

Making an Angular app

Making an Angular app

<ul class="list">
  <li class="person">
    <div class="first">John</div>
    <div class="last">Smith</div>
    <img class="avatar" src="..." />
  </li>
  <li class="person">
    <div class="first">Mary</div>
    <div class="last">Smith</div>
    <img class="avatar" src="..." />
  </li>
</ul>

<ul class="list">
  <li ng-class="..." ng-repeat="person in people">
    <div ng-class="...">{{ person.first | ... }}</div>
    <div ng-class="last">{{ person.last | ... }}</div>
    <img ng-class="..." ng-src="..." />
  </li>
</ul>

<ul class="list">
  <li ng-class="computed" ng-repeat="person in people track by person.id">
    <div ng-class="first-computed">{{:: person.first-computed }}</div>
    <div ng-class="last-computed">{{:: person.last-computed }}</div>
    <img ng-class="..." ng-src="..." />
  </li>
</ul>

// no need to run global digest
$timeout(..., ms, false);
// combine digests after HTTP
$http.useApplyAsync(true);

UI / UX

Performance

Making an X app

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);

Developer

UI / UX / Performance

Angular: making quickly the right app