Tips voor betere prestaties voor het maken van aangepaste Power BI-visuals

  • Artikel

In dit artikel worden technieken beschreven voor hoe een ontwikkelaar hoge prestaties kan bereiken bij het weergeven van hun aangepaste visuals.

Niemand wil dat het lang duurt voordat een visual wordt weergegeven. Het zo snel mogelijk weergeven van de visual is essentieel bij het schrijven van de code.

Notitie

Naarmate we het platform blijven verbeteren en verbeteren, worden er voortdurend nieuwe versies van de API uitgebracht. Als u optimaal gebruik wilt maken van het platform en de functieset van power BI-visuals, raden we u aan om up-to-date te blijven met de meest recente versie. Als u wilt weten welke versie u gebruikt, controleert u het apiVersionbestand pbiviz.json .

Hier volgen enkele aanbevelingen voor het bereiken van optimale prestaties voor uw aangepaste visual.

Grootte van invoegtoepassing verkleinen

Een kleinere grootte van een aangepaste visuele invoegtoepassing resulteert in:

  • Snellere downloadtijd
  • Snellere installatie wanneer de visual wordt uitgevoerd

Deze resources van derden kunnen u helpen om de grootte van uw invoegtoepassing te verkleinen door manieren te vinden om ongebruikte code of structuurschudding en codesplitsing te verwijderen.

De weergavetijd van de visual controleren

Meet de weergavetijd van uw visual in verschillende situaties om te zien welke onderdelen van het script optimalisatie nodig hebben.

Power BI Desktop Performance Analyzer

Screenshot of Performance Analyzer icon in main menu.

Gebruik de Power BI Desktop Performance Analyzer (View>Performance Analyzer) om te controleren hoe uw visual in de volgende gevallen wordt weergegeven:

  • Eerste weergave van de visual
  • Duizenden gegevenspunten
  • Eén gegevenspunt/meting (om de overhead van de visual te bepalen)
  • Filteren
  • Snijden
  • Het formaat wijzigen (werkt mogelijk niet in de Performance Analyzer)

Vergelijk deze metingen indien mogelijk met die van een vergelijkbare kernvisual om te zien of er onderdelen zijn die kunnen worden geoptimaliseerd.

De API voor gebruikerstijdsinstellingen gebruiken

Gebruik de Gebruikers timing-API om de JavaScript-prestaties van uw app te meten. Met deze API kunt u ook bepalen welke onderdelen van het script optimalisatie nodig hebben.

Zie de Api voor het gebruik van de gebruikerstijdsinstellingen voor meer informatie.

Andere manieren om uw aangepaste visual te testen

  • Code-instrumentatie: gebruik de volgende consolehulpprogramma's om gegevens te verzamelen over de prestaties van uw aangepaste visual (houd er rekening mee dat deze hulpprogramma's zijn gekoppeld aan externe hulpprogramma's van derden):

  • De volgende hulpprogramma's voor webontwikkelaars kunnen ook helpen bij het meten van de prestaties van uw visual, maar houd er rekening mee dat ze Ook Power BI profilen:

Nadat u hebt bepaald welke onderdelen van uw visual optimalisatie nodig hebben, bekijkt u deze tips.

Berichten bijwerken

Wanneer u de visual bijwerkt:

  • Maak de hele visual niet opnieuw als er slechts enkele elementen zijn gewijzigd. Alleen de benodigde elementen weergeven.
  • Sla de gegevensweergave op die is doorgegeven bij de update. Alleen de gegevenspunten weergeven die afwijken van de vorige gegevensweergave. Als ze niet zijn gewijzigd, hoeft u ze niet opnieuw te maken.
  • Het wijzigen van het formaat wordt vaak automatisch uitgevoerd door de browser en vereist geen update voor de visual.

DOM-knooppunten in cache

Wanneer een knooppunt of lijst met knooppunten wordt opgehaald uit de DOM, moet u bedenken of u deze in latere berekeningen opnieuw kunt gebruiken (soms zelfs de volgende lusiteratie). Zolang u niet meer knooppunten in het relevante gebied hoeft toe te voegen of te verwijderen, kan caching de algehele efficiëntie van de toepassing verbeteren.

Om ervoor te zorgen dat uw code snel is en de browser niet vertraagt, houdt u DOM-toegang tot een minimum.

Bijvoorbeeld:

In plaats van:

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

Probeer het volgende:

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

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

DOM-manipulatie voorkomen

Beperk DOM-manipulaties zoveel mogelijk. Invoegbewerkingen zoals prepend(), append()en after() zijn tijdrovend en mogen alleen worden gebruikt wanneer dat nodig is.

Bijvoorbeeld:

In plaats van:

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

Probeer het volgende:

Maak het bovenstaande voorbeeld sneller door de lijst vooraf te gebruiken html() en te bouwen:

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

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

JQuery opnieuw overwegen

Beperk JS-frameworks en gebruik waar mogelijk systeemeigen JS om de beschikbare bandbreedte te verhogen en de verwerkingsoverhead te verlagen. Als u dit doet, kunnen ook compatibiliteitsproblemen met oudere browsers worden verlaagd.

Zie youmightnotneedjquery.com voor alternatieve voorbeelden voor functies zoals JQueryshow, hideaddClassen meer voor meer informatie.

Animatie

Animatieopties

Voor herhaald gebruik van animaties kunt u overwegen Canvas of WebGL te gebruiken in plaats van SVG. In tegenstelling tot SVG wordt de prestaties van deze opties bepaald door grootte in plaats van inhoud.

Lees meer over de verschillen in SVG versus Canvas: Kiezen.

Tips voor canvasprestaties

Bekijk de volgende sites van derden voor tips over het verbeteren van canvasprestaties.

Leer bijvoorbeeld hoe u onnodige wijzigingen in canvasstatussen kunt voorkomen door te renderen op kleur in plaats van op positie.

Animatiefuncties

Gebruik requestAnimationFrame om uw animaties op het scherm bij te werken, zodat uw animatiefuncties worden aangeroepen voordat de browser een andere repaint aanroept.

Animatielussen

Worden ongewijzigde elementen opnieuw getekend door de animatielus?

Zo ja, dan verspilt het tijd om elementen te tekenen die niet veranderen van frame-naar-frame.

Oplossing: Werk de frames selectief bij.

Wanneer u statische visualisaties animeert, is het verleidelijk om alle tekencode in één updatefunctie op te heffen en deze herhaaldelijk aan te roepen met nieuwe gegevens voor elke herhaling van de animatielus.

In plaats daarvan kunt u overwegen een visuele constructormethode te gebruiken om alles statisch te tekenen. Vervolgens hoeft de updatefunctie alleen visualisatie-elementen te tekenen die veranderen.

Tip

Inefficiënte animatielussen worden vaak gevonden in assen en legenda's.

Algemene problemen

  • Berekening van de tekstgrootte: Wanneer er veel gegevenspunten zijn, verspilt u geen tijd voor het berekenen van de tekstgrootte voor elk punt. Een paar punten berekenen en vervolgens een schatting maken.
  • Als sommige elementen van de visual niet worden weergegeven in de weergave, hoeft u deze niet weer te geven.

Gerelateerde inhoud

Optimalisatiehandleiding voor Power BI

Meer vragen?Vraag het Power BI-community.