Tipy pro zvýšení výkonu pro vytváření kvalitních vlastních vizuálů Power BI

  • Článek

Tento článek popisuje techniky, jak vývojář může dosáhnout vysokého výkonu při vykreslování vlastních vizuálů.

Nikdo nechce, aby vykreslení vizuálu trvalo dlouho. Při psaní kódu je důležité, aby se vizuál co nejrychleji vykreslovat.

Poznámka:

S tím, jak budeme dál vylepšovat a vylepšovat platformu, se neustále vydávají nové verze rozhraní API. Pokud chcete využít platformu a sadu funkcí vizuálů Power BI na maximum, doporučujeme udržovat aktuální informace o nejnovější verzi. Pokud chcete zjistit, kterou verzi používáte, podívejte se do apiVersionsouboru pbiviz.json .

Tady je několik doporučení pro dosažení optimálního výkonu vlastního vizuálu.

Zmenšení velikosti modulu plug-in

Výsledkem menší velikosti modulu plug-in vlastního vizuálu je:

  • Rychlejší stahování
  • Rychlejší instalace při každém spuštění vizuálu

Tyto zdroje informací třetích stran vám můžou pomoct zmenšit velikost modulu plug-in vyhledáním způsobů, jak odebrat nepoužívaný kód nebo roztřesení stromu a rozdělení kódu.

Kontrola doby vykreslování vizuálu

Změřte dobu vykreslování vizuálu v různých situacích, abyste viděli, které části skriptu potřebují optimalizaci( pokud existuje).

Analyzátor výkonu Power BI Desktopu

Screenshot of Performance Analyzer icon in main menu.

Pomocí analyzátoru výkonu Power BI Desktopu (Zobrazení> Analyzátor výkonu) zkontrolujte, jak se vizuál vykresluje v následujících případech:

  • První vykreslení vizuálu
  • Tisíce datových bodů
  • Jeden datový bod nebo míra (k určení režie vykreslení vizuálu)
  • Filtrování
  • Krájení
  • Změna velikosti (nemusí fungovat v analyzátoru výkonu)

Pokud je to možné, porovnejte tato měření s podobným základním vizuálem, abyste zjistili, jestli existují části, které je možné optimalizovat.

Použití rozhraní API pro časování uživatelů

K měření výkonu JavaScriptu vaší aplikace použijte rozhraní API pro časování uživatelů. Toto rozhraní API vám také může pomoct rozhodnout, které části skriptu potřebují optimalizaci.

Další informace najdete v tématu Použití rozhraní API pro časování uživatelů.

Další způsoby testování vlastního vizuálu

  • Instrumentace kódu – Ke shromažďování dat o výkonu vlastního vizuálu použijte následující nástroje konzoly (všimněte si, že tyto nástroje odkazují na externí nástroje třetích stran):

  • Následující vývojářské nástroje pro web vám také můžou pomoct měřit výkon vizuálu, ale mějte na paměti, že profilují i Power BI:

Jakmile určíte, které části vizuálu potřebují optimalizaci, podívejte se na tyto tipy.

Aktualizace zpráv

Při aktualizaci vizuálu:

  • Pokud se změnily jenom některé prvky, neřešte celý vizuál. Vykreslujte pouze potřebné prvky.
  • Uložte zobrazení dat předané při aktualizaci. Vykreslujte pouze datové body, které se liší od předchozího zobrazení dat. Pokud se nezměnili, není potřeba je znovu vyřazovat.
  • Změna velikosti se často provádí automaticky v prohlížeči a nevyžaduje aktualizaci vizuálu.

Uzly DOM mezipaměti

Když se uzel nebo seznam uzlů načte z modelu DOM, zamyslete se nad tím, jestli je můžete použít v pozdějších výpočtech (někdy i další iterace smyčky). Pokud nepotřebujete přidávat nebo odstraňovat více uzlů v příslušné oblasti, může jejich ukládání do mezipaměti zlepšit celkovou efektivitu aplikace.

Abyste měli jistotu, že je váš kód rychlý a nezpomalí prohlížeč, udržujte přístup DOM k minimálnímu.

Příklad:

Místo:

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

Vyzkoušejte:

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

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

Vyhněte se manipulaci s DOM

Omezte manipulace s DOM co nejvíce. Operace vložení, jako prepend()je , append()a after() jsou časově náročné a měly by být použity pouze v případě potřeby.

Příklad:

Místo:

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

Vyzkoušejte:

Zrychlote výše uvedený příklad použitím html() a sestavením seznamu předem:

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

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

Znovu zvážit JQuery

Omezte architektury JS a používejte nativní JS, kdykoli je to možné, abyste zvýšili dostupnou šířku pásma a snížili režii na zpracování. To může také snížit problémy s kompatibilitou u starších prohlížečů.

Další informace najdete v tématu youmightnotneedjquery.com alternativní příklady pro funkce, jako jsou JQuery' s show, hide, addClassa další.

Animace

Možnosti animace

Pro opakované použití animací zvažte použití canvas nebo WebGL místo SVG. Na rozdíl od SVG je výkon těchto možností určen spíše velikostí než obsahem.

Přečtěte si další informace o rozdílech ve formátu SVG vs. Plátno: Jak zvolit.

Tipy k výkonu plátna

Podívejte se na následující weby třetích stran, kde najdete tipy na zlepšení výkonu plátna.

Zjistěte například, jak se vyhnout zbytečným změnám stavu plátna vykreslováním podle barvy místo pozice.

Animační funkce

Pomocí prvku requestAnimationFrame aktualizujte animace na obrazovce, takže se funkce animace volají před voláním prohlížeče na další překreslení.

Smyčky animací

Překresluje animační smyčka nezměněné prvky?

Pokud ano, ztrácí čas kreslení prvků, které se nezmění z rámečku na rámec.

Řešení: Selektivně aktualizujte rámce.

Při animaci statických vizualizací je lákavé zahltit veškerý nakreslený kód do jedné aktualizační funkce a opakovaně ho volat s novými daty pro každou iteraci smyčky animace.

Místo toho zvažte použití metody konstruktoru vizuálu k vykreslení všeho statického. Funkce update pak potřebuje nakreslit jenom prvky vizualizace, které se mění.

Tip

Neefektivní animační smyčky se často nacházejí v osách a legendách.

Běžné problémy

  • Výpočet velikosti textu: Pokud existuje hodně datových bodů, neztrácejte čas při výpočtu velikosti textu pro každý bod. Vypočítejte několik bodů a pak odhadněte.
  • Pokud se některé prvky vizuálu na displeji nezobrazují, nemusíte je vykreslovat.

Související obsah

Průvodce optimalizací pro Power BI

Máte další otázky?Zeptejte se Komunita Power BI.