Date post: | 21-Jan-2018 |
Category: |
Technology |
Upload: | gustavo-costa |
View: | 690 times |
Download: | 2 times |
Extreme Performance
Gustavo Costa
@willgmbr
N R
Pilares da Performance Front-end
Network performance Runtime performance
Bundling1
2 Minification…+
3 Tree-shaking
4 AOT
5 Lazy-load
6 Service Worker
Network performance
W
Webpack
Tools
B
Browserify
R
Rollup
R
SystemJS
G
Gulp
G
Grunt
G
GCC
?
…
#1 Bundling
#1 Bundling
#2 Minification…+
Dead code
Ofuscation
Minification
UglifyJS
#3 Tree Shaking
JIT AoT
#4 AoT
JIT (Just in time)Compilation
AoT(Ahead of time)
Compilation
• Compilamos para gerar um código mais eficiente para as VMs
Compilar?
• Versão 2 > cada componente tem seu PRÓPRIO Change detector.
• O Angular precisa ‘compilar' todo o template para também conseguir aplicar o tree shaking
1 2
componente.js(transpilado do typescript)
Entendendo um Componente Angular
componente-internal.js(ngfactory)
my-component
JIT
JIT (Just in time)Compilation
my-component.ts my-component.js
…
JIT
JIT (Just in time)Compilation
• Baixa todos os Javascripts.
• Angular é iniciado, verifica se é para iniciar em JIT ou AoT.
• Angular precisa compilar TODOS os componentes em JIT
• A aplicação é iniciada.
JIT
JIT (Just in time)Compilation
my-component.js
• Angular precisa ‘compilar’ esse template e criar tudo isso via javascript, nosso internal component ou (ngfactory)
• Com isso criar o Change detector desse componente.
…
ng serve
• TODO o código do Angular foi IMPORTADO e TODO SEU COMPILER e suas dependências também.
KEEP CALM!
• Não há ABSOLUTAMENTE NENHUMA técnica de performance nesse código (minificação, tree shaking etc…)
• Isso é que faz deixar o ‘auto reload’ rápido desenvolvendo uma aplicação Angular
AoT
AoT(Ahead of time)
Compilation
ng serve —aot
ng build—aot
AoT
AoT(Ahead of time)
Compilation
• Também tem muito benefício em runtime performance, veremos mais na frente.
JIT AoT
Recap #4 AoT
JIT (Just in time)Compilation
AoT(Ahead of time)
Compilation
Vue
#5 lazy-loadPeople Component01 Person
Component02
PeopleModule
PeopleService
PeopleComponent
PersonModule
PersonService
PersonComponent
AppComponent
AppRouting
AppModule
/
/person/:id
lazylazy
eager
#5 lazy-load
Lazy demo
HTTP21
2 ServiceWorker
3 Application Shell
4 CacheAPI
5 Pre-fetching
Outras técnicas
easy
Angular CLI
Build time!
ng build --prod
#5 compression
GCC + BROTLI
Em breve teremos hello world do Angular com apenas:
40kb!
AoT1
3 Change Detection
4 trackby
5 WebWorkers
Runtime performance
enableProdMode2
6 Server-side rendering
JIT AoT
#1 AoT
JIT (Just in time)Compilation
AoT(Ahead of time)
Compilation
JIT
JIT (Just in time)Compilation
• Baixa todos os Javascripts.
• Angular é iniciado, verifica se é para iniciar em JIT ou AoT.
• Angular precisa compilar TODOS os componentes em JIT
• A aplicação é iniciada.
AoT
AoT(Ahead of time)
Compilation
• Baixa todos os Javascripts.
• Angular é iniciado, inicia com AoT
• Angular precisa compilar TODOS os componentes em JIT
• A aplicação é iniciada.
JIT
JIT (Just in time)Compilation
my-component.ts my-component.js
…
JIT
JIT (Just in time)Compilation
my-component.js
…
my-component-internal.js
JIT
JIT (Just in time)Compilation
my-component-internal.js
create()
JIT
JIT (Just in time)Compilation
my-component.tscreate()
JIT
JIT (Just in time)Compilation
my-component-internal.js
detectChanges()
AoT
AoT(Ahead of time)
Compilation
3x - 10x
#2 enableProdMode
SMARTER?
#3 Change Detection
ChangeDetection.Default
user === valorAntigoDoUser ?
user.name === valorAntigoDoUser.name ?user.bio === valorAntigoDoUser.bio ?
user.propsInView * n
MUTABILIDADE
ChangeDetection.OnPush
user === valorAntigoDoUser ?
run change detection! :-)
IMUTABILIDADE
ChangeDetection Demo
Notifique o Angular!
markForCheck();
#4 trackby
#5 WebWorkers
Event Loop
Single thread
#6 Server-side rendering
AoT !== SSR
Otimiza JS Gera HTML/CSS
• Angular universal
Ferramentas
• Vue.js Server-Side
• import ReactDOMServer from 'react-dom/server';
https://github.com/mgechev/angular-performance-checklist
https://blog.thoughtram.io
https://victorsavkin.com
https://twitter.com/jeffbcross
Referências
https://angular.io