SlideShare a Scribd company logo
Improve runtime 

performance
About mySelf
• Experienced FE developer, specialised in B2C applications
• FE trainer & lecturer @ 500Tech
• Weekends FE developer @ fashbash.co
Let’s build a strong Angular
community together!!
Runtime performance
Run time performance should bother us?
• Angular core team direction:
• Ivy - Hello world in 2.7 kb
• Better tree shaking
• Dead code elimination
• The rest is in our hands…
"We found that 53% of mobile site visits
are abandoned if pages take longer than
3 second to load…”
Runtime performance
Tools to measure
Performance
Benchmark.js Chrome dev tools
Profiler
@angular/benchpress
function benchmark(iterations, f) {
var start = new Date();
for (var i = 0; i < iterations; i++) {
f();
}
var end = new Date();
return "Elapsed time: " + (end - start) + " msec";
}
benchmark(1000000, function() {});
Why benchpress?
● Rendering time - test the performance impact of stylesheet
changes
● Garbage collection - improve memory usage of applications
● Measure the client side only - ignoring BE calls
● Measure FPS
@angular/benchpress
Measure your bundles
ng build --prod --source-map
npx source-map-explorer dist/*/main*js
Page Load
Optimisations
• - - prod (AOT, tree shacking)
• Lazy Loading
• Opportunity for improve?
• Time between html load & bootstrap
Page load Optimisations
What we want to measure?
Time for first
meaningful paint
Time to
interactive
1. Pre rendering
Aka - @angular/universal
Page Load
SSR
Regular

load
0 30 60 90 120
index.html load App bootstrap First view
2. Pre xhr requests
Page Load - search pages
Time
0 40 80 120 160
index.html load App bootstrap First view XHR request
Page Load - search pages optimised
Time
0 40 80 120 160
index.html load XHR request App bootstrap First view
3. Service Workers
Service workers
ng add @angular/pwa --project *project-name*
Service workers
Fast Work offline Installable
Integrated Engaging
Service workers
Fast Work offline Installable
Integrated Engaging
Caching with service workers
• cache API - cache your app shall and assets
• Intercept your Http requests - cache them?
Runtime
Optimisations
Fibonacci sequence - sounds easy to compote?
Recursive
Iterative
Fibonacci
remember?
export function fibonacci(n) {
let a = 1, b = 0;
let temp;
while (n >= 0) {
temp = a;
a = a + b;
b = temp;
n--;
}
return b;
}
export function fibonacci(n) {
if ((n === 1) || (n === 2)) { return 1; }
return fibonacci(n - 2) + fibonacci(n - 1);
}
O(2^n)
Demo…
1. onPush
changeDetectionstrategy
We need to trigger the
change detection…
Copy the entire array
is efficient?
2. immutable.js
npm i immutable -—save
Why IMMUTABLE.js?
• Enforce immutability - trigger change detection
• Persistent Data Structures = X100 times faster
• Should I always use this library? It depends…
Let’s try!
Demo…
3. Re-factor
components design
4. Pure function
5. Memoization
npm i memo-decorator —-save
6. ngFor trackBy
ngFor trackBy
<li class="list-group-item d-flex”
*ngFor="let item of data; trackBy: trackByFn">
trackByFn(index, item) {
return index;
}
https://stackblitz.com/edit/tackbyfn?file=src/app/app.component.html
7.Virtual Scroll
Virtual Scroll
<cdk-virtual-scroll-viewport itemSize="150" style="height:500px">
<div *cdkVirtualFor="let number of numbers" class="item">
{{number}}
</div>
</cdk-virtual-scroll-viewport>
8. Use rxjs
operators
distinctUntilChanged, debounceTime
inputEvent: Subject<string> = new Subject<string>();
ngOnInit(): void {
this.inputEvent.pipe(
distinctUntilChanged(),
debounceTime(300)).subscribe((res: any) => {
if (res.keyCode === 13) {
this.add.emit(this.label);
this.label = '';
}
});
}
handleKey(event: any) {
this.inputEvent.next(event);
}
Share
this.http.get<any>('url...').pipe(share());
withLatestFrom
Buffer
9. Forms updateOn
<input [(ngModel)]="lastname" [ngModelOptions]="{ updateOn: 'blur' }">
firstname: new FormControl('', {
validators: Validators.required,
updateOn: 'submit'
})
10. Control the
change detection
constructor(private changeDetectorRef: ChangeDetectorRef) { }
onInit() {
this.changeDetectorRef.detach();
}
onClick() {
this.changeDetectorRef.detectChanges();
}
Thank You
@EliranEliassy eliran.eliassy@gmail.comeliraneliassy

More Related Content

PPTX
Serverless in-action
PDF
E yantra robot abstractions
PDF
Compute @ edge
DOCX
Inline function(oops)
PDF
from ai.backend import python @ pycontw2018
PDF
Running Docker on AWS
PPTX
Aws Autoscale with-big-ip-f5-sns-cf
PPTX
“ASP.NET Core. Features and architecture”
Serverless in-action
E yantra robot abstractions
Compute @ edge
Inline function(oops)
from ai.backend import python @ pycontw2018
Running Docker on AWS
Aws Autoscale with-big-ip-f5-sns-cf
“ASP.NET Core. Features and architecture”

What's hot (20)

PPTX
Adopting serverless
PDF
Ansible, PHP and EC2
PPTX
Sergei Nesterov "How to Speed Up the Build of Large Projects. Overview and C...
PPTX
Cmdb
PPTX
Inline function in C++
PDF
OSCamp #4 on Foreman | Ansible automation for Foreman by Ondřej Ezr
PPTX
I am-one-with-angular
PDF
Build and Host Real-world Machine Learning Services from Scratch @ pycontw2019
PDF
Eclipse PTP in AICS
PPTX
Era of server less computing
PDF
JIT Compilation for VA Smalltalk
PPTX
Optimizing and Deploying Angular
PPTX
Expand Your Testing with Virtual Services
PDF
Serverless testing @ serverlessdays Hamburg
PPTX
Immutable infrastructure with Terraform
ODP
Generating ephermal values in ansible
PPTX
Ansible Tower - Drew Bomhof, Brandon Dunne - ManageIQ Design Summit 2016
PDF
Javascript internals
PDF
Load test REST APIs using gatling
PDF
Gatling @ Scala.Io 2013
Adopting serverless
Ansible, PHP and EC2
Sergei Nesterov "How to Speed Up the Build of Large Projects. Overview and C...
Cmdb
Inline function in C++
OSCamp #4 on Foreman | Ansible automation for Foreman by Ondřej Ezr
I am-one-with-angular
Build and Host Real-world Machine Learning Services from Scratch @ pycontw2019
Eclipse PTP in AICS
Era of server less computing
JIT Compilation for VA Smalltalk
Optimizing and Deploying Angular
Expand Your Testing with Virtual Services
Serverless testing @ serverlessdays Hamburg
Immutable infrastructure with Terraform
Generating ephermal values in ansible
Ansible Tower - Drew Bomhof, Brandon Dunne - ManageIQ Design Summit 2016
Javascript internals
Load test REST APIs using gatling
Gatling @ Scala.Io 2013
Ad

Similar to Runtime performance (20)

PDF
Angular performance improvments
PDF
Angular - Improve Runtime performance 2019
PPTX
Azure Functions @ global azure day 2017
PPT
Performance and Scalability Testing with Python and Multi-Mechanize
PDF
Building a Sustainable Data Platform on AWS
PDF
Malo Denielou - No shard left behind: Dynamic work rebalancing in Apache Beam
PPTX
Guidelines to understand durable functions with .net core, c# and stateful se...
PDF
App engine devfest_mexico_10
PDF
Flink Forward SF 2017: Malo Deniélou - No shard left behind: Dynamic work re...
PPTX
ServerLess by usama Azure fuctions.pptx
PPTX
COB - Azure Functions for Office 365 developers
PPTX
SharePoint Framework at a glance
PDF
Big rewrites without big risks
PDF
Flavius Ștef: Big Rewrites Without Big Risks at I T.A.K.E. Unconference
PDF
20211202 North America DevOps Group NADOG Adapting to Covid With Serverless C...
PDF
Vitaliy Makogon: Migration to ivy. Angular component libraries with IVY support.
PDF
Flink Forward SF 2017: Feng Wang & Zhijiang Wang - Runtime Improvements in Bl...
PDF
20211202 NADOG Adapting to Covid with Serverless Craeg Strong Ariel Partners
PDF
Practices and tools for building better API (JFall 2013)
PDF
Practices and tools for building better APIs
Angular performance improvments
Angular - Improve Runtime performance 2019
Azure Functions @ global azure day 2017
Performance and Scalability Testing with Python and Multi-Mechanize
Building a Sustainable Data Platform on AWS
Malo Denielou - No shard left behind: Dynamic work rebalancing in Apache Beam
Guidelines to understand durable functions with .net core, c# and stateful se...
App engine devfest_mexico_10
Flink Forward SF 2017: Malo Deniélou - No shard left behind: Dynamic work re...
ServerLess by usama Azure fuctions.pptx
COB - Azure Functions for Office 365 developers
SharePoint Framework at a glance
Big rewrites without big risks
Flavius Ștef: Big Rewrites Without Big Risks at I T.A.K.E. Unconference
20211202 North America DevOps Group NADOG Adapting to Covid With Serverless C...
Vitaliy Makogon: Migration to ivy. Angular component libraries with IVY support.
Flink Forward SF 2017: Feng Wang & Zhijiang Wang - Runtime Improvements in Bl...
20211202 NADOG Adapting to Covid with Serverless Craeg Strong Ariel Partners
Practices and tools for building better API (JFall 2013)
Practices and tools for building better APIs
Ad

More from Eliran Eliassy (8)

PDF
Between JS and AI
PDF
Ngrx meta reducers
PDF
Angular CDK
PDF
Angular - injection tokens & Custom libraries
PDF
Intro to HTML and CSS basics
PDF
Angular server side rendering - Strategies & Technics
PDF
Angular genericforms2
PPTX
Generic forms
Between JS and AI
Ngrx meta reducers
Angular CDK
Angular - injection tokens & Custom libraries
Intro to HTML and CSS basics
Angular server side rendering - Strategies & Technics
Angular genericforms2
Generic forms

Recently uploaded (20)

PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PPTX
Programs and apps: productivity, graphics, security and other tools
PPTX
cloud_computing_Infrastucture_as_cloud_p
PDF
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
WOOl fibre morphology and structure.pdf for textiles
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PDF
A comparative analysis of optical character recognition models for extracting...
PPTX
Group 1 Presentation -Planning and Decision Making .pptx
PDF
August Patch Tuesday
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
A comparative study of natural language inference in Swahili using monolingua...
PDF
Encapsulation theory and applications.pdf
PDF
Enhancing emotion recognition model for a student engagement use case through...
PDF
Zenith AI: Advanced Artificial Intelligence
PPTX
Chapter 5: Probability Theory and Statistics
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PPTX
A Presentation on Artificial Intelligence
PDF
From MVP to Full-Scale Product A Startup’s Software Journey.pdf
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Programs and apps: productivity, graphics, security and other tools
cloud_computing_Infrastucture_as_cloud_p
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
Agricultural_Statistics_at_a_Glance_2022_0.pdf
WOOl fibre morphology and structure.pdf for textiles
MIND Revenue Release Quarter 2 2025 Press Release
A comparative analysis of optical character recognition models for extracting...
Group 1 Presentation -Planning and Decision Making .pptx
August Patch Tuesday
Encapsulation_ Review paper, used for researhc scholars
A comparative study of natural language inference in Swahili using monolingua...
Encapsulation theory and applications.pdf
Enhancing emotion recognition model for a student engagement use case through...
Zenith AI: Advanced Artificial Intelligence
Chapter 5: Probability Theory and Statistics
Building Integrated photovoltaic BIPV_UPV.pdf
A Presentation on Artificial Intelligence
From MVP to Full-Scale Product A Startup’s Software Journey.pdf

Runtime performance