Ytelsestips for å opprette egendefinerte visualobjekter av høy kvalitet

  • Artikkel

Denne artikkelen handler om teknikker for hvordan en utvikler kan oppnå høy ytelse når de gjengir sine egendefinerte visualobjekter.

Ingen ønsker at et visualobjekt skal ta lang tid å gjengi. Det er viktig å få visualobjektet til å gjengi så raskt som mulig når du skriver koden.

Merk

Etter hvert som vi fortsetter å forbedre og forbedre plattformen, lanseres nye versjoner av API-en hele tiden. Vi anbefaler at du holder deg oppdatert med den nyeste versjonen for å få mest mulig ut av power BI-visualobjektplattformen og funksjonssettet. Hvis du vil finne ut hvilken versjon du bruker, kan du sjekke apiVersion inn pbiviz.json-filen .

Her er noen anbefalinger for å oppnå optimal ytelse for det egendefinerte visualobjektet.

Redusere størrelsen på plugin-modulen

En mindre plugin-størrelse for egendefinerte visualobjekter resulterer i:

  • Raskere nedlastingstid
  • Raskere installasjon når visualobjektet kjøres

Disse tredjepartsressursene kan hjelpe deg med å redusere størrelsen på plugin-modulen ved å finne måter du kan fjerne ubrukt kode eller treristing og kodesplitting på.

Kontrollere gjengivelsestiden for visualobjektet

Mål gjengivelsestiden for visualobjektet i ulike situasjoner for å se hvilke deler av skriptet som trenger optimalisering.

Ytelsesanalyse for Power BI Desktop

Screenshot of Performance Analyzer icon in main menu.

Bruk ytelsesanalysen for Power BI Desktop (Vis> Ytelsesanalyse) til å kontrollere hvordan visualobjektet gjengis i følgende tilfeller:

  • Første gjengivelse av visualobjektet
  • Tusenvis av datapunkter
  • Ett enkelt datapunkt/mål (for å fastslå overhead for visualobjektgjengivelse)
  • Filtrering
  • Slicing
  • Endring av størrelse (fungerer kanskje ikke i ytelsesanalysen)

Hvis det er mulig, kan du sammenligne disse målingene med de av et lignende kjernevisualobjekt for å se om det finnes deler som kan optimaliseres.

Bruke API-en for brukertidsberegning

Bruk API-en for brukertidsberegning til å måle appens JavaScript-ytelse. Denne API-en kan også hjelpe deg med å bestemme hvilke deler av skriptet som trenger optimalisering.

Hvis du vil ha mer informasjon, kan du se API-en bruk av brukertidsberegning.

Andre måter å teste det egendefinerte visualobjektet på

Når du har funnet ut hvilke deler av visualobjektet som må optimaliseres, kan du se disse tipsene.

Oppdatere meldinger

Når du oppdaterer visualobjektet:

  • Ikke rerender hele visualobjektet hvis bare noen elementer har endret seg. Gjengi bare de nødvendige elementene.
  • Lagre datavisningen som ble sendt ved oppdatering. Gjengi bare datapunktene som er forskjellige fra den forrige datavisningen. Hvis de ikke har endret seg, er det ikke nødvendig å rerender dem.
  • Endring av størrelse utføres ofte automatisk av nettleseren og krever ikke en oppdatering av visualobjektet.

Hurtigbuffer-DOM-noder

Når en node eller liste over noder hentes fra DOM, kan du tenke på om du kan bruke dem på nytt i senere beregninger (noen ganger også neste løkke gjentakelse). Så lenge du ikke trenger å legge til eller slette flere noder i det aktuelle området, kan hurtigbufring av dem forbedre programmets generelle effektivitet.

Hvis du vil forsikre deg om at koden er rask og ikke reduserer hastigheten på nettleseren, holder du DOM-tilgangen på et minimum.

Eksempel:

I stedet for:

public update(options: VisualUpdateOptions) { 
    let axis = $(".axis"); 
}

Prøv:

public constructor(options: VisualConstructorOptions) { 
    this.$root = $(options.element); 
    this.xAxis = this.$root.find(".xAxis"); 
} 

public update(options: VisualUpdateOptions) { 
    let axis = this.axis; 
}

Unngå DOM-manipulering

Begrens DOM-manipulasjoner så mye som mulig. Sett inn operasjoner som prepend(), append()og after() er tidkrevende og bør bare brukes når det er nødvendig.

Eksempel:

I stedet for:

for (let i=0; i<1000; i++) { 
    $('#list').append('<li>'+i+'</li>');
}

Prøv:

Gjør eksemplet ovenfor raskere ved å bruke html() og bygge listen på forhånd:

let list = ''; 
for (let i=0; i<1000; i++) { 
    list += '<li>'+i+'</li>'; 
} 

$('#list').html(list);

Revurdere JQuery

Begrens JS-rammeverk og bruk opprinnelig JS når det er mulig for å øke den tilgjengelige båndbredden og redusere behandlingskostnadene. Dette kan også redusere kompatibilitetsproblemer med eldre nettlesere.

Hvis du vil ha mer informasjon, kan du se youmightnotneedjquery.com for alternative eksempler på funksjoner som JQuerys show, hide, addClassog mer.

Animasjon

Animasjonsalternativer

Hvis du vil ha gjentatt bruk av animasjoner, kan du vurdere å bruke Lerret eller WebGL i stedet for SVG. I motsetning til SVG bestemmes ytelsen med disse alternativene av størrelse i stedet for innhold.

Les mer om forskjellene i SVG vs Lerret: Slik velger du.

Ytelsestips for lerret

Se følgende tredjepartsnettsteder for tips om hvordan du forbedrer lerretsytelsen.

Lær for eksempel hvordan du unngår unødvendige endringer i lerretstilstanden ved å gjengi etter farge i stedet for posisjon.

Animasjonsfunksjoner

Bruk requestAnimationFrame til å oppdatere animasjoner på skjermen, slik at animasjonsfunksjonene kalles før nettleseren kaller opp en annen repaint.

Animasjonsløkker

Tegner animasjonsløkken uendrede elementer på nytt?

I så fall kaster det bort tid på å tegne elementer som ikke endres fra ramme til ramme.

Løsning: Oppdater rammene selektivt.

Når du animerer statiske visualiseringer, er det fristende å samle all tegnekoden i én oppdateringsfunksjon og gjentatte ganger kalle den med nye data for hver gjentakelse av animasjonsløkken.

Vurder i stedet å bruke en visuell konstruktørmetode til å tegne alt statisk. Deretter trenger oppdateringsfunksjonen bare å tegne visualiseringselementer som endres.

Tips

Ineffektive animasjonsløkker finnes ofte i akser og forklaringer.

Vanlige problemer

  • Beregning av tekststørrelse: Når det er mange datapunkter, må du ikke kaste bort tid på å beregne tekststørrelse for hvert punkt. Beregn noen få punkter og deretter beregne.
  • Hvis noen elementer i visualobjektet ikke vises i visningen, er det ikke nødvendig å gjengi dem.

Relatert innhold

Optimaliseringsveiledning for Power BI

Flere spørsmål?Spør Power BI-fellesskap.