Événements
31 mars, 23 h - 2 avr., 23 h
L’événement de la communauté Microsoft Fabric, Power BI, SQL et AI ultime. 31 mars au 2 avril 2025.
Inscrivez-vous aujourd’huiCe navigateur n’est plus pris en charge.
Effectuez une mise à niveau vers Microsoft Edge pour tirer parti des dernières fonctionnalités, des mises à jour de sécurité et du support technique.
Cet article aborde les techniques permettant à un développeur d’obtenir des performances élevées lors du rendu de ses visuels personnalisés.
Personne ne souhaite qu’un visuel prenne beaucoup de temps à s’afficher. Lors de l’écriture du code, il est primordial de faire en sorte que le visuel s’affiche le plus rapidement possible.
Notes
Comme nous continuons à améliorer la plateforme, de nouvelles versions de l’API sont publiées en continu. Pour tirer le meilleur parti de la plateforme et des fonctionnalités des visuels Power BI, nous vous recommandons de toujours utiliser la version la plus récente. Pour savoir quelle version vous utilisez, consultez le apiVersion
fichier pbiviz.json .
Voici quelques recommandations afin d’obtenir des performances optimales pour votre visuel personnalisé.
Une plus petite taille de plug-in visuel personnalisé entraîne les résultats suivants :
Ces ressources tierces peuvent vous aider à réduire la taille de votre plug-in, en trouvant des moyens de supprimer le code inutilisé ou l’arborescence et le fractionnement du code.
Mesurez le temps de rendu de votre visuel dans différentes situations pour voir quelles parties du script ont besoin d’une optimisation, le cas échéant.
Utilisez l’analyseur de performances Power BI Desktop (View>Analyseur de performances) pour case activée comment votre visuel s’affiche dans les cas suivants :
Si possible, comparez ces mesures à celles d’un visuel de base similaire pour voir s’il existe des parties qui peuvent être optimisées.
Utilisez l’API User Timing pour mesurer les performances JavaScript de votre application. Cet API peut également vous aider à choisir quelles parties du script ont besoin d’optimisation.
Pour plus d’informations, consultez Utilisation de l’API de chronométrage d’utilisateur.
Instrumentation du code : utilisez les outils de console suivants pour collecter des données sur les performances de votre visuel personnalisé (notez que ces outils sont liés à des outils tiers externes) :
Les outils de développement web suivants peuvent également vous aider à mesurer les performances de votre visuel, mais gardez à l’esprit qu’ils profilent également Power BI :
Une fois que vous avez déterminé quelles parties de votre visuel ont besoin d’optimisation, case activée ces conseils.
Lorsque vous mettez à jour le visuel :
Quand un nœud ou une liste de nœuds est récupérée auprès du modèle DOM, réfléchissez à la possibilité de les réutiliser dans des calculs ultérieurs (parfois même dans l’itération suivante de la boucle). Tant que vous n’avez pas besoin d’ajouter ou de supprimer des nœuds supplémentaires dans la zone appropriée, leur mise en cache peut améliorer l’efficacité globale de l’application.
Pour être sûr que votre code est rapide et ne ralentit pas le navigateur, accédez le moins possible au modèle DOM.
Par exemple :
Au lieu de :
public update(options: VisualUpdateOptions) {
let axis = $(".axis");
}
Essayez :
public constructor(options: VisualConstructorOptions) {
this.$root = $(options.element);
this.xAxis = this.$root.find(".xAxis");
}
public update(options: VisualUpdateOptions) {
let axis = this.axis;
}
Limitez autant que possible les manipulations du modèle DOM. Les opérations d’insertion comme prepend()
, append()
et after()
prennent du temps et doivent seulement être utilisées lorsqu’elles sont vraiment nécessaires.
Par exemple :
Au lieu de :
for (let i=0; i<1000; i++) {
$('#list').append('<li>'+i+'</li>');
}
Essayez :
Effectuez l’exemple ci-dessus plus rapidement en utilisant html()
et en créant la liste au préalable :
let list = '';
for (let i=0; i<1000; i++) {
list += '<li>'+i+'</li>';
}
$('#list').html(list);
Limitez les frameworks JS et utilisez JS en mode natif dans la mesure du possible pour augmenter la bande passante disponible et réduire la charge de votre traitement. Cela peut également réduire les problèmes de compatibilité avec les navigateurs plus anciens.
Pour plus d’informations, consultez youmightnotneedjquery.com pour obtenir d’autres exemples pour les fonctions JQuery, comme show
, hide
, addClass
, etc.
Pour une utilisation répétée d’animations, envisagez d’utiliser Canvas ou WebGL au lieu de SVG. Contrairement à SVG, avec ces options, les performances sont déterminées par la taille plutôt que par le contenu.
Pour plus d’informations sur les différences, consultez SVG vs Canvas: How to Choose.
Consultez les sites tiers suivants pour obtenir des conseils sur l’amélioration des performances du canevas.
Par exemple, découvrez comment éviter les modifications inutiles de l’état du canevas en effectuant un rendu par couleur plutôt que par position.
Utilisez requestAnimationFrame pour mettre à jour vos animations à l’écran afin que vos fonctions d’animation sont appelées avant que le navigateur appelle une autre fonction pour actualiser le dessin.
La boucle d’animation redessine-t-elle les éléments inchangés ?
Si tel est le cas, le fait de redessiner les éléments qui ne changent pas d’une image à l’autre est une perte de temps.
Solution : Mettre à jour les images de façon sélective.
Quand vous animez des visualisations statiques, il est tentant de regrouper tout le code qui réalise le dessin en une seule fonction de mise à jour et de l’appeler de façon répétée avec de nouvelles données pour chaque itération de la boucle d’animation.
Au lieu de cela, envisagez d’utiliser une méthode de constructeur de visuel pour dessiner tout ce qui est statique. Ensuite, la fonction de mise à jour doit dessiner seulement les éléments qui changent dans le visuel.
Conseil
Les boucles d’animation inefficaces se trouvent souvent dans les axes et légendes.
Guide d’optimisation pour Power BI
Plus de questions ? Demandez au Communauté Power BI.
Événements
31 mars, 23 h - 2 avr., 23 h
L’événement de la communauté Microsoft Fabric, Power BI, SQL et AI ultime. 31 mars au 2 avril 2025.
Inscrivez-vous aujourd’huiEntrainement
Module
Optimiser un modèle pour améliorer les performances dans Power BI - Training
L’optimisation des niveaux de performance, également appelée réglage des performances, consiste à apporter des modifications à l’état actuel du modèle sémantique afin qu’il s’exécute plus efficacement. En gros, quand votre modèle sémantique est optimisé, il fonctionne mieux.
Certification
Microsoft Certified: Power BI Data Analyst Associate - Certifications
Démontrez des méthodes et les meilleures pratiques qui s’alignent sur les exigences métier et techniques pour la modélisation, la visualisation et l’analyse des données avec Microsoft Power BI.