Документ обсуждает производительность Angular 2, включая факторы, влияющие на скорость загрузки и работу приложений. В нем представлены советы по оптимизации, такие как использование производственного режима, отслеживание изменений и предварительная компиляция шаблонов. В также описываются методы улучшения восприятия производительности и многопоточности.

1. Превышаем
скоростные
лимиты с Angular 2
Алексей Охрименко - IPONWEB

2. Алексей
Охрименко
Twitter: @Ai_boy
IPONWEB

7. IPONWEB
RTB
DSP
SSP

8. 8

9. последствия превышения
скорости (в реальной жизни)

10. последствия
превышения
скорости*
* - поищите в Google Image - 4-ый результат

11. Всегда
успеете…

12. А где тогда скорость превышать?

15. Angular 2, Angular 2…
нас и [НАШ_FRAMEWORK]
неплохо кормит

17. А что значит «скорость»?

18. Скорость
загрузки

19. Скорость
загрузки
Размер

20. Скорость
загрузки
Размер
LazyLoading

21. Скорость
загрузки
Скорость работы
Размер
LazyLoading

22. Скорость
загрузки
Скорость работы
Размер
LazyLoading
Обьем работы

23. Скорость
загрузки
Скорость работы
Размер
LazyLoading
Обьем работы Производительность

24. Скорость
загрузки
Скорость работы
Размер
LazyLoading
Обьем работы Производительность
Память

25. Скорость
загрузки
Скорость работы
Размер
LazyLoading
Обьем работы
Многопоточность
Производительность
Память

26. Скорость работы
Обьем работы
Многопоточность
Производительность
Память
Скорость
загрузки
Размер
LazyLoading

27. Скорость работы

28. https://github.com/krausest/js-framework-benchmark
https://github.com/mathieuancelin/js-repaint-perfs

30. Кол-во перерисовок в секунду (больше лучше)
Angular 1
Angular 2
React
Elm
0 9 18 27 36

31. Наша цель … 90 RR

32. Кол-во перерисовок в секунду (больше лучше)
Angular 2
Target
0 10 20 30 40 50 60 70 80 90

33. Старая версия Angular 2

34. Alpha 44

35. Alpha 44 —> v2.1.2

36. Alpha 44
Angular 2
Target
0 10 20 30 40 50 60 70 80 90

37. v2.1.2
Angular 2
Target
0 10 20 30 40 50 60 70 80 90

38. v2.1.2
Angular 2
Target
0 10 20 30 40 50 60 70 80 90

39. На самом деле все просто…

40. Angular 2 Performance Checklist

41. import {enableProdMode} from '@angular/core';
enableProdMode();

42. 300% в Edge
enableProdMode()

43. Alpha 44
Angular 2
Target
0 10 20 30 40 50 60 70 80 90

44. v2.1.2 + enableProdMod()
Angular 2
Target
0 10 20 30 40 50 60 70 80 90

45. function getData(keepIdentity) {
var oldData = data;
if (!keepIdentity) { // reset for each tick
data = [];
for (var i = 1; i <= ENV.rows; i++) {
data.push({ … });
data.push({ … });
}
}
}

46. @Page({
template: `
<div
*ngFor="let post of posts;trackBy:identify">
{{post.data}}
</div>
`
})
export class SomeConponent {
identify(index,item){
return post.id
}
}

47. @Page({
template: `
<div
*ngFor="let post of posts;trackBy:identify">
{{post.data}}
</div>
`
})
export class SomeConponent {
identify(index,item){
return post.id
}
}

48. v2.1.2 + enableProdMod()
Angular 2
Target
0 10 20 30 40 50 60 70 80 90

49. trackBy
Angular 2
Target
0 10 20 30 40 50 60 70 80 90

50. AOT
Ahead Of Time template compilation

53. Angular CLI
ng serve ——aot
ng build ——aot

54. trackBy
Angular 2
Target
0 10 20 30 40 50 60 70 80 90

55. AOT
Angular 2
Target
0 10 20 30 40 50 60 70 80 90

56. WebWorkers

57. import {bootstrapWorkerUi} from '@angular/platform-webworker';
import {enableProdMode} from '@angular/core';
export function main() {
enableProdMode();
bootstrapWorkerUi('loader.js');
}

58. import {bootstrapWorkerUi} from '@angular/platform-webworker';
import {enableProdMode} from '@angular/core';
export function main() {
enableProdMode();
bootstrapWorkerUi('loader.js');
}

59. @NgModule({
imports: [WorkerAppModule],
bootstrap: [AppComponent],
declarations: [AppComponent]
})
class WebWorkerModule {}
export function main() {
enableProdMode();
platformWorkerAppDynamic().bootstrapModule(WebWorkerModule);
}

60. @NgModule({
imports: [WorkerAppModule],
bootstrap: [AppComponent],
declarations: [AppComponent]
})
class WebWorkerModule {}
export function main() {
enableProdMode();
platformWorkerAppDynamic().bootstrapModule(WebWorkerModule);
}

61. AOT
Angular 2
Target
0 10 20 30 40 50 60 70 80 90

62. webWorkers
Angular 2
Target
0 10 20 30 40 50 60 70 80 90

64. Кол-во перерисовок в секунду (больше лучше)
Angular 1
Angular 2
React
Elm
0 10 20 30 40 50 60 70 80 90

65. Еще раз
• enableProd()
• trackBy
• AOT
• WebWorkers

66. Заглянем под капот

67. Scott
Hanselman

68. ZoneJs

70. const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});

72. process.on('uncaughtException', (err) => {
console.log(`Caught exception: ${err}`);
});

74. Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(someCallback, 0);
});
function someCallback() {
console.log(Zone.current.inTheZone);
}
setTimeout(someCallback, 0);

75. Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(someCallback, 0);
});
function someCallback() {
console.log(Zone.current.inTheZone);
}
setTimeout(someCallback, 0);

76. Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(someCallback, 0);
});
function someCallback() {
console.log(Zone.current.inTheZone);
}
setTimeout(someCallback, 0);

77. Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(someCallback, 0);
});
function someCallback() {
console.log(Zone.current.inTheZone);
}
setTimeout(someCallback, 0);

78. Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(someCallback, 0);
});
function someCallback() {
console.log(Zone.current.inTheZone); // TRUE
}
setTimeout(someCallback, 0);

79. Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(someCallback, 0);
});
function someCallback() {
console.log(Zone.current.inTheZone);
}
setTimeout(someCallback, 0);

80. Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(someCallback, 0);
});
function someCallback() {
console.log(Zone.current.inTheZone); // FALSE
}
setTimeout(someCallback, 0);

81. Change Detection

87. // very simplified version of actual source
class ApplicationRef {
changeDetectorRefs:ChangeDetectorRef[] = [];
constructor(private zone: NgZone) {
this.zone.onTurnDone
.subscribe(() => {
this.zone.run(() => this.tick()
});
}
tick() {
this.changeDetectorRefs
.forEach((ref) => ref.detectChanges());
}
}

88. // very simplified version of actual source
class ApplicationRef {
changeDetectorRefs:ChangeDetectorRef[] = [];
constructor(private zone: NgZone) {
this.zone.onTurnDone
.subscribe(() => {
this.zone.run(() => this.tick()
});
}
tick() {
this.changeDetectorRefs
.forEach((ref) => ref.detectChanges());
}
}

89. // very simplified version of actual source
class ApplicationRef {
changeDetectorRefs:ChangeDetectorRef[] = [];
constructor(private zone: NgZone) {
this.zone.onTurnDone
.subscribe(() => {
this.zone.run(() => this.tick()
});
}
tick() {
this.changeDetectorRefs
.forEach((ref) => ref.detectChanges());
}
}

90. // very simplified version of actual source
class ApplicationRef {
changeDetectorRefs:ChangeDetectorRef[] = [];
constructor(private zone: NgZone) {
this.zone.onTurnDone
.subscribe(() => {
this.zone.run(() => this.tick()
});
}
tick() {
this.changeDetectorRefs
.forEach((ref) => ref.detectChanges());
}
}

92. @Component({
template: '<v-card [vData]="vData"></v-card>'
})
class VCardApp {
constructor() {
this.vData = {
name: 'Christoph Burgdorf',
email: 'christoph@thoughtram.io'
}
}
changeData() {
this.vData.name = 'Pascal Precht';
}
}

93. @Component({
template: `
<h2>{{vData.name}}</h2>
<span>{{vData.email}}</span>
`
})
class VCardCmp {
@Input() vData;
}

94. @Component({
template: '<v-card [vData]="vData"></v-card>'
})
class VCardApp {
constructor() {
this.vData = {
name: 'Christoph Burgdorf',
email: 'christoph@thoughtram.io'
}
}
changeData() {
this.vData = { name: 'Pascal Precht' };
}
}

95. @Component({
template: `
<h2>{{vData.name}}</h2>
<span>{{vData.email}}</span>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
class VCardCmp {
@Input() vData;
}

97. Управляем Zone и CD

98. constructor(private zone: NgZone) {}

99. processOutsideAngularZone() {
this.progress = 0;
this.zone.runOutsideAngular(() => {
this.increaseProgress(() => {
this.zone.run(() => {
console.log('Outside Done!');
});
});
});
}

100. processOutsideAngularZone() {
this.progress = 0;
this.zone.runOutsideAngular(() => {
this.increaseProgress(() => {
this.zone.run(() => {
console.log('Outside Done!');
});
});
});
}

101. constructor(private cd: ChangeDetectorRef) {}

102. ngOnInit() {
this.addItemStream.subscribe(() => {
this.counter++; // application state changed
this.cd.markForCheck(); // marks path
})
}
}

103. А можно как-то попроще?

104. Redux

105. ng2-redux
ngrx/store

106. Mobx

107. ng2-mobx

109. Улучшаем Perceived Performance
•Увеличивая реальную производительность

110. Улучшаем Perceived Performance
•Увеличивая реальную производительность
•Замедляя реальную производительность

111. Улучшаем Perceived Performance
•Увеличивая реальную производительность
•Замедляя реальную производительность
•Грамотно перераспределяя нагрузку и
ресурсы

113. FRP
functional reactive programming

114. this.form.valueChanges
.filter((value) => this.form.valid)
.switchMap((value) => {
return http.post(‘/api’, value)
});

115. this.form.valueChanges
.debounce(500)
.filter((value) => this.form.valid)
.switchMap((value) => {
return http.post(‘/api’, value)
});

116. this.form.valueChanges
.debounce(500)
.distinctUntilChanged()
.filter((value) => this.form.valid)
.switchMap((value) => {
return http.post(‘/api’, value)
});

117. this.form.valueChanges
.debounce(500)
.distinctUntilChanged()
.filter((value) => this.form.valid)
.switchMap((value) => {
return http.post(‘/api’, value)
}).retryWhen(attempts =>
attempts
.zip(Observable.range(1, 3), (_, i) => i)
.flatMap((i: number) => {
return Observable.timer(i * 1000);
})
))

119. Алексей
Охрименко
Twitter: @Ai_boy
IPONWEB
http://bit.ly/2eMOBjm