AngularJs Performance

Dr. Gleb Bahmutov PhD

Kensho

• Personal site http://glebbahmutov.com/
• Blog http://glebbahmutov.com/blog/
• Twitter @bahmutov

Kensho app

Improving angular web app performance example

moved to glebbahmutov.com/blog/improving-angular-web-app-performance-example/

post Covers many topics

• Accurate profiling using code snippets
• v8 engine optimization warnings
• idle digest cycle optimization
• removing expensive filters
• using bind-once
• Angular vs manual HTML generation
• splitting work into batches
• offloading work to separate thread
• optimizing memory allocation
  • Memory profiling
• on-demand computation
• minimize objects attached to the scope
• updating and showing only visible elements

important parts

• Accurate profiling using code snippets
• v8 engine optimization warnings
• idle digest cycle optimization
• removing expensive filters
• using bind-once
• Angular vs manual HTML generation
• splitting work into batches
• offloading work to separate thread
• optimizing memory allocation
  • Memory profiling
• on-demand computation
• minimize objects attached to the scope
• updating and showing only visible elements

benchmarking vs profiling

github.com/bahmutov/primes

• step-0 initial application
• step-1 removed try-catch
• step-2 reusing found primes
• step-3 checking fewer numbers per prime
• step-4 profiling idle digest
• step-5 removed unnecessary filters
• step-6 one way binding using bind-once
• step-7 generating HTML in code
• step-8 2 batch generation
• step-9 small batches
• step-10 appending each table body
• step-11 web workers
• step-12 memory profiling
• step-13 on-demand computation using infinite scroll
• step-14 expensive copy in deep watch
• step-15 limit work to visible elements

Tags

• step-0 initial application
• step-1 removed try-catch
• step-2 reusing found primes
• step-3 checking fewer numbers per prime
• step-4 profiling idle digest
• step-5 removed unnecessary filters
• step-6 one way binding using bind-once
• step-7 generating HTML in code
• step-8 2 batch generation
• step-9 small batches
• step-10 appending each table body
• step-11 web workers
• step-12 memory profiling
• step-13 on-demand computation using infinite scroll
• step-14 expensive copy in deep watch
• step-15 limit work to visible elements

Tags: your code, digest cycle, DOM, on-demand computation

• step-0 initial application
  • slow even for 1000 primes
• step-1 removed try-catch
  • slow for 10k primes
• step-2 reusing found primes
• step-3 checking fewer numbers per prime
  • fast for 100k primes
• step-4 profiling idle digest
  • pauses after changing N value in the input box
• step-5 removed unnecessary filters
  • faster idle digest
• step-6 one way binding using bind-once
  • fast idle digest - slow 100k DOM update

• step-7 generating HTML in code
  • ​Faster rendering, still long pause before visible
• step-8 2 batch generation
  • Long freeze after initial rendering
• step-9 small batches
  • Better responsiveness
• step-10 appending each table body
  • Faster DOM updates
• step-11 web workers
  • No freezing
• step-12 memory profiling
  • GC collection events

• step-13 on-demand computation using infinite scroll
  • ​Only compute data right before it is needed
• step-14 expensive copy in deep watch
  • Large objects attached to the scope are expensive in the watch due to copy operation
• step-15 limit work to visible elements
  • Minimize DOM to only elements that can potentially be visible

Angular performance

Lessons

• Learn how to accurately profile your code
• Optimize top bottleneck first
• Minimize number of watchers
• Simplify watch expressions - precompute data
• Work in batches - use web workers
• Work on demand - ng-infinite-scroll
• Limit DOM elements to visible data - angular-vs-repeat

does angular have A performance problem?