Teljesítménytippek minőségi Egyéni Power BI-vizualizációk létrehozásához

Ez a cikk bemutatja, hogyan érheti el a fejlesztők a nagy teljesítményt az egyéni vizualizációk renderelése során.

Senki sem szeretné, hogy a vizualizációk megjelenítése hosszú időt vesz igénybe. A kód írásakor kritikus fontosságú, hogy a vizualizáció a lehető leggyorsabban renderelhető legyen.

Az alábbiakban néhány javaslatot talál az egyéni vizualizáció optimális teljesítményének eléréséhez.

Beépülő modul méretének csökkentése

A kisebb egyéni vizualizációs beépülő modul mérete a következőt eredményezi:

• Gyorsabb letöltési idő
• Gyorsabb telepítés a vizualizáció futtatásakor

Ezek a külső erőforrások segíthetnek a beépülő modul méretének csökkentésében azáltal, hogy módot talál a nem használt kód eltávolítására, illetve a faremegés és a kódfelosztás eltávolítására.

A vizualizáció renderelési idejének ellenőrzése

Mérje meg a vizualizáció megjelenítési idejét különböző helyzetekben, és ellenőrizze, hogy a szkript mely részeire van szükség optimalizáláshoz.

Power BI Desktop teljesítményelemző

A Power BI Desktop teljesítményelemzőjével (View> Teljesítményelemző) ellenőrizheti, hogy a vizualizáció hogyan jelenik meg a következő esetekben:

• A vizualizáció első renderelése
• Több ezer adatpont
• Egyetlen adatpont/mérték (a vizualizációk többletterhelésének meghatározásához)
• Szűrés
• Szeletelés
• Átméretezés (lehet, hogy nem működik a teljesítményelemzőben)

Ha lehetséges, hasonlítsa össze ezeket a méréseket egy hasonló alapvető vizualizációéval, és ellenőrizze, hogy vannak-e optimalizálható részek.

A Felhasználó időzítése API használata

Az alkalmazás JavaScript-teljesítményének méréséhez használja a User Timing API-t. Ez az API segít eldönteni, hogy a szkript mely részeit kell optimalizálni.

További információkért lásd a Felhasználó időzítése API használatát ismertető témakört.

Az egyéni vizualizáció tesztelésének egyéb módjai

• Kódállapot – Az alábbi konzoleszközökkel gyűjthet adatokat az egyéni vizualizáció teljesítményéről (vegye figyelembe, hogy ezek az eszközök külső külső eszközökre hivatkoznak):

  • console.log()
  • console.dir()
  • console.time()
  • console.timeEnd()

• Az alábbi webfejlesztői eszközök a vizualizáció teljesítményének mérésében is segíthetnek, de ne feledje, hogy a Power BI-t is profillal látják el:

  • Metrikák
  • JavaScript-profilozó

Miután megállapította, hogy a vizualizáció mely részeinek kell optimalizálnia, tekintse meg ezeket a tippeket.

Üzenetek frissítése

A vizualizáció frissítésekor:

• Ne módosítsa újra a teljes vizualizációt, ha csak néhány elem módosult. Csak a szükséges elemek megjelenítése.
• Tárolja a frissítés során átadott adatnézetet. Csak azokat az adatpontokat jeleníti meg, amelyek eltérnek az előző adatnézettől. Ha nem változtak, nem kell újrarendeznünk őket.
• Az átméretezést gyakran automatikusan végzi a böngésző, és nem igényel frissítést a vizualizációhoz.

DOM-csomópontok gyorsítótárazása

Ha a rendszer lekéri a csomópontokat vagy a csomópontok listáját a DOM-ból, gondolja át, hogy újra felhasználhatja-e őket későbbi számításokban (néha még a következő ciklus iterációjában is). Ha nem kell több csomópontot hozzáadnia vagy törölnie a megfelelő területen, a gyorsítótárazás javíthatja az alkalmazás általános hatékonyságát.

Annak érdekében, hogy a kód gyors legyen, és ne lassítsa le a böngészőt, tartsa a DOM-hozzáférést a minimálisra.

Példa:

Ahelyett, hogy:

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

Próbálja ki:

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

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

A DOM-manipuláció elkerülése

A lehető legnagyobb mértékben korlátozza a DOM-manipulációkat. Az olyan műveletek beszúrása, mint a prepend(), append()after() és időigényesek, és csak akkor használhatók, ha szükséges.

Példa:

Ahelyett, hogy:

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

Próbálja ki:

A fenti példa gyorsabbá tétele a lista előzetes használatával html() és létrehozásával:

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

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

JQuery újragondolás

Korlátozza a JS-keretrendszereket, és amikor csak lehetséges, natív JS használatával növelje a rendelkezésre álló sávszélességet, és csökkentse a feldolgozási többletterhelést. Ez csökkentheti a régebbi böngészők kompatibilitási problémáit is.

További információkért tekintse meg youmightnotneedjquery.com olyan függvények alternatív példáit, mint a JQueryshowhideaddClass, stb.

Animáció

Animációs beállítások

Az animációk ismételt használatához fontolja meg a Vászon vagy a WebGL használatát SVG helyett. Az SVG-vel ellentétben ezekkel a beállításokkal a teljesítményt a tartalom helyett a méret határozza meg.

További információ az SVG és a vászon közötti különbségekről : A választás menete.

Vászonteljesítmény-tippek

A vászon teljesítményének javítására vonatkozó tippekért tekintse meg a következő külső webhelyeket.

• Gyors betöltési idők
• A HTML5-vászon teljesítményének javítása
• Vászon optimalizálása

Megtudhatja például, hogyan kerülheti el a szükségtelen vászonállapot-módosításokat úgy, hogy a pozíció helyett szín alapján jeleníti meg a módosításokat .

Animációs függvények

A requestAnimationFrame használatával frissítheti a képernyőn megjelenő animációkat, így az animációs függvényeket a böngésző meghívja, mielőtt egy másik újrafestést hív meg.

Animációs hurkok

Az animációs ciklus újraírja a változatlan elemeket?

Ha igen, időt pazarol az olyan rajzelemekre, amelyek nem változnak keretről keretre.

Megoldás: A keretek szelektív frissítése.

Statikus vizualizációk animálásakor csábító, hogy az összes rajzkódot egyetlen frissítési függvénybe szúrja be, és az animációs ciklus minden iterációjához új adatokkal hívja meg.

Ehelyett fontolja meg a vizualizációk konstruktorának használatát, hogy mindent statikusan rajzoljon. Ezután a frissítési függvénynek csak a változó vizualizációelemeket kell rajzolnia.

Gyakori problémák

• Szövegméret kiszámítása: Ha sok adatpont van, ne pazarolja az időt az egyes pontok szövegméretének kiszámítására. Számítsunk ki néhány pontot, majd becsüljük meg.
• Ha a vizualizáció egyes elemei nem láthatók a kijelzőn, akkor nem kell renderelni őket.

Kapcsolódó tartalom

Optimalizálási útmutató a Power BI-hoz

További kérdések? Kérdezze meg a Power BI-közösség.