AngularJs Performance

Dr. Gleb Bahmutov PhD

Kensho

 

 

Kensho app

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

Benchmarking is useless in complete application

Use live application profiling instead.

  • 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?

No

You can easily profile and optimize each part to perform well for you specific application while staying inside the AngularJS ecosystem.

AngularJs Performance

By Gleb Bahmutov

AngularJs Performance

profiling and improving AngularJs application performance using code snippets, working in batches, offloading work, on-demand computation, memory preallocation and smart DOM updates.

  • 12,249