В этой статье я сравниваю разные директивы Angular по скорости работы и выявляю лучшие, с точки зрения производительности, способы выводить данные.
1. Сравнение разных способов изменения стилей.
Таблица сравнения производительности при работе со стилям
| Скорость, мс | |
| [ngClass]=”{‘my-class’: myVar}” | 226 |
| class=”{{myVar ? ‘my-class’ : ”” | 134 |
| [ngClass]=”class” | 214 |
| [style.color]=”style” | 133 |
Способы сравнивались с помощью этого теста. Тест проводился пять раз и приведены усреднённые показатели.
Как видно, второй и четвертый способы показывают наибольшую производительность.
Но следует иметь ввиду, что при использовании четвёртого способа производительность падает при увеличении количества свойств, поэтому наилучший способ – второй
2. Сравнение ngIf и ngSwitch
Сравнение скорости директив при разном количество вариантов.
| Количество вариантов | |||
| Один | Два | Три | |
| *ngIf | 213 мс | 334 мс | 407 мс |
| ngSwitch | 190 мс | 283 мс | 363 мс |
| style.display | 119 мс | 194 мс | 243 мс |
Ссылка на тест с одним вариантом, с двумя и с тремя. Каждый тест так же проводился пять раз, и здесь приведены усреднённые показатели.
Эти тесты выявили сразу две неожиданные и интересные вещи. Во-первых, оказалось что ngSwitch для одного варианта работает быстрее чем ngIf, а во-вторых, при увеличении числа вариантов ngIf не начинает отставать сильнее – всё те же 10-15%. Как и ожидалось, style.display работает значительно быстрее, но следует понимать, что первые два способа удаляют блоки из dom, в то время как третий их просто скрывает, и при некоторых случаях это в результате может снижать быстродействие.
Цели получения абсолютных чисел и точных значений не ставилось. Все тесты проводились на моём компьютере и результаты носят примерный, ориентировочный характер.