angular - Er det dårlig for ytelsen/lasting å legge til en dynamisk navneplass for CSS-klassene dine via en komponentegenskap?

Tenk deg dette:

export class MyComponent {

  namespace: string;

  constructor(private globals: Globals) {
    this.namespace = globals.namespace;
  } 
}

Og deretter malen slik:

<div class="{{namespace}}-wrapper">
  <h1 class="{{namespace}}-title"></h1>
  <h2 class="{{namespace}}-subtitle"></h2>
</div>

Dette gir deg full kontroll over din styling siden ingen tredjepartsstiler (eller veldig, veldig få siden ikke mange vil ha samme namespace og suffikser) kan forstyrre dine egne stiler, men hva med ytelsen? La oss si at jeg har 20 bindings som dette i gjennomsnitt per mal, påvirker det ytelsen på en måte som burde få deg til å vurdere å ikke bruke denne tilnærmingen?

Teknisk sett burde det ikke påvirke ytelsen siden det bare er en engangs-tilkobling, men kanskje lastetiden øker ved å gjøre dette? Jeg har ikke funnet noen sikker måte å teste dette på, så jeg kan ikke vite det sikkert.

Jeg kjenner til visningsinkapsling, men jeg ønsker å ha en tilnærming som gjør at jeg kan slå den av og samtidig være sikker på at ingenting vil gå galt.

Finnes det en bedre måte å oppnå dette på kanskje, eller er dette en helt grei tilnærming?

Svar #1

Det finnes ingen engangsbinding i Angular2. Hver gang endringsdeteksjon kjører, sjekkes egenskaper brukt i slike bindinger for endringer.

Angular2 sin endringsdeteksjon er ganske effektiv og kan ytterligere optimaliseres ved å bruke ChangeDetectionStrategy.OnPush.

Hvis du har omtrent 20 bindinger per mal, kan dette bli et ganske stort totalt antall for hele applikasjonen, og jeg forventer at dette vil skade ytelsen.

Jeg ser ingen grunn til at dette kunne skade lastetiden.

Relaterte artikler