Angular 7 Performance Impact с динамическими стилями - PullRequest
Новая
       20

Angular 7 Performance Impact с динамическими стилями

0 голосов
/ 20 апреля 2019

Я создаю компонент, который использует большое количество динамических стилей (например, 10) [styles.xx], чтобы пользователь мог настроить внешний вид компонента. Кроме того, компонент может повторяться в родительском компоненте довольно много раз (например, 10-20 раз). Примеры стилей включают в себя: 

[style.color]
[style.font-size]
[style.text-alignment]

Я включил ChangeDetectionStrategy.OnPush, чтобы минимизировать влияние на производительность.

Это может звучать очень субъективно. Я замечаю, что когда я прокручиваю включенные стили без каких-либо стилей, это немного замедляет работу прокрутки.

Мои вопросы:

  1. Использование большого количества динамических стилей в повторяющемся компоненте может повлиять на производительность? Даже с ChangeDetectionStrategy.OnPush?
  2. Использование ngStyles в сравнении со стилями повышает производительность?
  3. Какие еще стратегии можно использовать для минимизации влияния на производительность?

ПРИМЕЧАНИЕ. Мне нужны только стили при инициализации компонента.

Я играю с использованием document.getElementsByClassName и атрибутом set для изменения стилей при инициализации, но надеюсь на более простой способ использования стилей.

Заранее спасибо

Пример части компонента (я использую Ionic). 

<ion-card *ngIf="traits.isLock && isRead !== 4 && element.is_card_read" fxFlex fxLayout="horizontal" class="element-inactive element" [style.background-color]="element.card_read_bg_color" style="min-height: 50px" no-margin>   
    <div fxFlex>  

      <div fxFlex fxLayout="vertical">   
        <div style="width:100%" [style.text-align]="labelAlignment">
          <label *ngIf="element.is_label_show" class="label caption"  [style.color]="element.read_caption_color" [style.font-size.px]="labelSize">{{columnName}}</label>
        </div>      
        <div style="width:100%" [style.text-align]="textAlignment">
          <span [style.font-size.px]="textSize" [style.color]="element.read_text_color">{{value}}</span>
        </div>      
      </div>    
    </div> 
  </ion-card>
...