Share via

Tipy na zvýšenie výkonu pri vytváraní kvalitných vlastných vizuálov služby Power BI

  • Článok

Tento článok popisuje techniky, ktorými môže vývojár dosiahnuť vysoký výkon pri vykresľovaní vlastných vizuálov.

Nikto nechce, aby vizuál trvať dlho. Čo najrýchlejšie vykreslenie vizuálu je pri písaní kódu veľmi dôležité.

Poznámka

Pretože aj naďalej zdokonaľujeme a vylepšujeme platformu, neustále sa vydávajú nové verzie rozhrania API. Na to, aby ste mohli naplno vykonávať platformu a množinu funkcií vizuálov Power BI, odporúčame vám vykonávať aktuálne informácie o najnovšej verzii. Ak chcete zistiť, ktorú verziu používate, pozrite si apiVersionsúbor pbiviz.json .

Tu je niekoľko odporúčaní na dosiahnutie optimálneho výkonu pre vlastný vizuál.

Zmenšenie veľkosti doplnku

Menšia veľkosť doplnku vlastného vizuálu má za následok:

  • Rýchlejšie sťahovanie
  • Rýchlejšie inštalovanie pri každom spustení vizuálu

Tieto zdroje tretích strán vám môžu pomôcť zmenšiť veľkosť doplnku tým, že nájdu spôsoby, ako odstrániť nepoužívaný kód alebo tree-shaking a rozdelenie kódu.

Kontrola času vykreslenia vizuálu

Zmerajte čas vykreslenia vizuálu v rôznych situáciách, aby ste zistili, ktoré časti skriptu v prípade potreby potrebujú optimalizáciu.

Analyzátor výkonu aplikácie Power BI Desktop

Screenshot of Performance Analyzer icon in main menu.

Pomocou Analyzátora výkonu aplikácie Power BI Desktop (Zobraziť> Analyzátor výkonu) môžete skontrolovať, ako sa vizuál vykreslí v nasledujúcich prípadoch:

  • Prvé vykreslenie vizuálu
  • Tisíce údajových bodov
  • Jeden údajový bod alebo mierka (na určenie režijných nákladov na vykreslenie vizuálu)
  • Filtrovanie
  • Krájanie
  • Zmena veľkosti (nemusí fungovať v Analyzátore výkonu)

Ak je to možné, porovnajte tieto merania s meraniami podobných hlavných vizuálov, aby ste zistili, či existujú časti, ktoré možno optimalizovať.

Použitie rozhrania API na časovanie používateľa

Ak chcete merať výkon JavaScriptu aplikácie, použite rozhranie API na časovanie používateľa. Toto rozhranie API vám tiež pomôže určiť, ktoré časti skriptu potrebujú optimalizáciu.

Ďalšie informácie nájdete v téme Používanie rozhrania API na časovanie používateľa.

Iné spôsoby testovania vlastného vizuálu

  • Kód inštrumentácia – na zhromaždenie údajov o výkone vlastného vizuálu použite nasledujúce konzolové nástroje (všimnite si, že tieto nástroje obsahujú prepojenie na externé nástroje tretích strán):

  • Nasledujúce nástroje webových vývojárov môžu tiež pomôcť zmerať výkon vášho vizuálu, ale majte na pamäti, že aj oni profilujú službu Power BI:

Keď zistíte, ktoré časti vizuálu potrebujú optimalizáciu, pozrite si tieto tipy.

Aktualizovať správy

Pri aktualizácii vizuálu:

  • Ak sa zmenili len niektoré prvky, celý vizuál neprekvapte. Vykresľte iba potrebné prvky.
  • Uložiť zobrazenie údajov odovzdané pri aktualizácii. Vykreslí iba údajové body, ktoré sa líšia od predchádzajúceho zobrazenia údajov. Ak sa nezmenili, nie je potrebné ich premýšľať.
  • Zmena veľkosti sa často vykonáva automaticky v prehliadači a nevyžaduje aktualizáciu vizuálu.

Uzly DOM vyrovnávacej pamäte

Pri načítaní uzla alebo zoznamu uzlov z rozhrania DOM sa zamyslite nad tým, či ich môžete opätovne použiť v neskorších výpočtoch (niekedy dokonca aj v prípade nasledujúcej iterácie slučky). Ak nepotrebujete pridať ani odstrániť ďalšie uzly v príslušnej oblasti, ich ukladanie do vyrovnávacej pamäte môže zlepšiť celkovú efektivitu aplikácie.

Aby ste sa uistili, že kód je rýchly a nespomaľuje prehliadač, pristupujte k rozviedke DOM minimálne.

Napríklad:

Namiesto týchto:

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

Vyskúšajte:

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

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

Vyhnite sa manipulácii s modelom DOM

Manipuláciu s rozhraním DOM obmedzte čo najviac. Operácie vkladania, ako sú napríklad prepend(), append()a after() , sú časovo náročné a mali by sa použiť iba v prípade potreby.

Napríklad:

Namiesto týchto:

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

Vyskúšajte:

Vytvorte vyššie uvedený príklad rýchlejšie pomocou html() a vopred vytvorte zoznam:

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

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

Prehodnotenie JQuery

Obmedzte architektúry JS a používajte natívny JS vždy, keď je to možné, zvýšte dostupnú šírku pásma a znížite režijné náklady na spracovanie. Môže to tiež znížiť problémy s kompatibilitou so staršími prehliadačmi.

Ďalšie informácie nájdete youmightnotneedjquery.com alternatívnych príkladov funkcií, ako sú napríklad funkcie JQuery show, hide, addClassa ďalšie.

Animácie

Možnosti animácie

V prípade opakovaného používania animácií zvážte použitie plátna alebo WebGL namiesto SVG. Na rozdiel od SVG sa pri týchto možnostiach výkon určuje podľa veľkosti namiesto obsahu.

Prečítajte si viac o rozdieloch v téme SVG a plátno: Ako si vybrať.

Tipy na zvýšenie výkonu plátna

Tipy na zlepšenie výkonu plátna nájdete na nasledujúcich lokalitách tretích strán.

Naučte sa napríklad, ako sa vyhnúť zbytočným zmenám stavu plátna vykresľovaním podľa farby namiesto pozície.

Funkcie animácie

Pomocou metódy requestAnimationFrame aktualizujte animácie na obrazovke, aby sa funkcie animácie volali ešte predtým , ako prehliadač vyvolá ďalšie prekreslenie.

Slučky animácie

Prekreslí slučka animácie nezmenené prvky?

Ak áno, zaťažuje to čas kreslenie prvkov, ktoré sa zo snímky na snímku nemenia.

Riešenie: Aktualizujte snímky selektívne.

Pri animovaní statických vizualizácií je lákavé, aby sa všetok kresliaci kód vymohla do jednej funkcie aktualizácie a opakovane ju volal s novými údajmi pre každú iteráciu slučky animácie.

Namiesto toho zvážte použitie metódy konštruktora vizuálu na kreslenie statických prvkov. Následne bude funkcia aktualizácie musieť nakresliť iba prvky vizualizácie, ktoré sa zmenia.

Prepitné

Neefektívne slučky animácie sa často nachádzajú v osiach a legendách.

Bežné problémy

  • Výpočet veľkosti textu: Ak existuje veľa údajových bodov, nestrácajte čas výpočtom veľkosti textu pre každý bod. Vypočítajte niekoľko bodov a potom odhadnite.
  • Ak sa niektoré prvky vizuálu nezobrazujú na obrazovke, nie je ich potrebné vykresliť.

Súvisiaci obsah

Sprievodca optimalizáciou pre službu Power BI

Máte ďalšie otázky?Spýtajte sa Komunita Power BI.