Turn the performance knob to 10

Dr. Gleb Bahmutov PhD

KENSHO

@bahmutov

glebbahmutov.com

  ―11 

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

Angular app optimization

  • Live app profiling

  • "Angular plus React equals Speed" revisited

  • A story of failure and redemption

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 many watchers are there?

How long does digest take?

ng-idle-apply-timing.js

ng-count-watchers.js

MY PROFILING RULES

PROFILE IN A "CLEAN" BROWSER

PROFILE THE ACTUAL APPLICATION

OPTIMIZE THE TOP BOTTLENECK FIRST

Kensho        Angular

Your application should have "ports" for performance diagnostics

Kensho        Angular

Automatic

car adapter

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

Digest cycle runs 1500 times

ng-count-digest-cycle-simple.js

There are 5000 watchers

ng-count-watchers.js

Why so many digest cycles?

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

Do not run digest each time

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

Table update runs in 0.5 seconds

bahmutov/angular_react_directive_example

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>

Hmm, are we updating DOM on each table cell creation?

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/

(benv + jsdom + browserify - Node parts)

bahmutov/bundle-angular-for-web-worker

Hey, do your part!

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

N web workers

Load

Angular 1.x app

Rendering parts in N workers

Look at the big picture, not hacks

<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

designer

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

designer or developer

Just Enough Angular for Designers

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>

developer

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>

good developer

// 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);

Designer!

Developer

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

2

Kensho        Angular

Turn the performance knob to 10

slides: slides.com/bahmutov

posts: glebbahmutov.com/blog/tags/angularjs/

follow: @bahmutov

  ―11 

Kensho        Angular

Turn the performance knob to 11

By Gleb Bahmutov

Turn the performance knob to 11

Once your Angular application has the features you need, the next step is usually focused on improving its performance, such as the initial load time and responsiveness to user’s commands. The application has to execute quickly in order to be useful. Is the Angular framework fast or slow? I argue that it is very fast, but requires you to know how to measure and optimize the right bottlenecks.

  • 8,714

More from Gleb Bahmutov