Astuce Silverlight : astuces sur les performances de Silverlight - #S011
Après avoir regardé la présentation de Seema à la PDC sur Building an Optimized, Graphics-Intensive Application in Microsoft Silverlight, je pense qu’il pourrait être intéressant de résumer ce que j’ai appris.
1. Débogage
Les éléments suivants vous aideront à déboguer les performances dans vos applications Silverlight :
EnableRedrawRegions – Activez ce paramètre de débogage pour voir comment quoi et comment les rectangles sont dessinés sur votre application. Lorsque qu’il est activé, vous pouvez voir ce qui est dessiné parce que la région redessinée est coloriée en bleu, jaune ou rose. Cette propriété est définie lorsque vous créez votre plug-in Silverlight.
Exemple :
<div style="height:100%">
<asp:Silverlight ID="Xaml1" EnableRedrawRegions="true"
EnableFrameRateCounter="true" runat="server" PluginBackground="Transparent"
Windowless="true" Source="~/ClientBin/Snowflakes.xap"
MinimumVersion="2.0.30523" Width="100%" Height="100%" />
</div>
- MaxFrameRate - Pour voir quels composants de votre application ont un effet le plus négatif sur les performances vous pouvez définir le MaxFrameRate de votre application. Vous pouvez l’expérimenter en ajoutant et supprimant les composants de votre application pour voir comment les performances sont modifiées. Pour cela, définissez les propriétés en surbrillance ci-dessous :
<div style="height:100%">
<asp:Silverlight ID="Xaml1" MaxFrameRate="10" EnableFrameRateCounter="true"
runat="server" PluginBackground="Transparent" Windowless="true"
Source="~/ClientBin/Snowflakes.xap" MinimumVersion="2.0.30523" Width="100%"
Height="100%" />
</div>
- XPerf – C'est un outil profilage qui peut servir à analyser les performances de votre application Silverlight. Par exemple, vous pouvez suivre l'usage du CPU et des disques dur au fil du temps. Installez le à partir d'ici : https://msdn.microsoft.com/fr-fr/library/cc305187.aspx. Pour plus de détails et d'instructions, veuillez consulter ce blog : https://blogs.msdn.com/seema/archive/2008/10/08/xperf-a-cpu-sampler-for-silverlight.aspx (En Anglais).
2. Media Pipeline
Pour chaque trame et chaque pixel, lorsque vous dessinez un élément média Silverlight :
1. Décodage de l'image.
2. Conversion YUV
3. Redimensionnement si le média n'est pas à sa taille d'origine.
4. Mélange si nécessaire (par exemple : superpositions faire défiler comme des icônes, barres de défilement etc..)
5. Dessin
Quelques remarques sur les performances :
1. Encoder l'élément média au taux minimum de rafraichissement que vous pouvez accepter.
2. Afficher votre élément média à sa taille initiale afin d'éviter les calculs de redimensionnement. Si vous souhaitez une taille différente, réencodez tout d'abord les médias à la taille souhaitée pour l'affichage. Ceci enregistrera sur la bande passante et l'interpolation de chaque pixel de chaque trame.
3. Le mélange de médias est coûteuse, évitez des superpositions dans la mesure du possible.
4. Pour les médias, utilisez un taux de rafraichissement d'environ 60 frames par seconde pour obtenir de meilleurs résultats.
3. Rendu de texte
Le rendu de texte est coûteux et devrait être évité lorsque cela est possible. Les déclencheurs d’actions suivants pour être recalculé :
1. La traduction ou l'évolutivité le texte
2. Médias sur la page.
3. Animation sur la page.
Envisagez d'utiliser une image bitmap en remplacement de texte pour toute animation intensive.
4. Contrôle Silverlight.
- Lancez Silverlight avec “Windowless = false” est plus rapide que “Windowless=true”. Définissez la à true uniquement si vous avez besoin de superposer le contenu HTML au dessus de votre application Silverlight.
- Ne définissez pas le contrôle plug-in Silverlight à PluginBackground = "transparent" à moins que ce qoit absolument nécessaire. Cela additionne les coûts à chaque appel de rendu, forcé par le pipeline de mélange. Si votre objectif est de faire correspondre la couleur d'arrière-plan des contrôles Silverlight avec votre couleur d'arrière-plan HTML définissez simplement la couleur du style d'arrière-plan de votre page HTML pour correspondre au contrôle Silverlight. Dans l'exemple ci-dessous, nous définissons l'arrière-plan du corps de la page HTML (body) en noir. Assurez-vous que la taille du contrôle Silverlight corresponde à celle que vous avez déclaré dans Page.xaml. Dans le cas contraire la différence sera représenté par une bordure blanche.
<body style="background-color:Black;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/FastAnimation.xap" MinimumVersion="2.0.30523" Width="800px" Height="600px" />
</div>
</form>
</body>
Dernières remarques :
· Silverlight permet le contrôle total des threads de l’interface utilisateur. A utiliser avec parcimonie.
· Ne gonflez pas trop votre code, en particulier le XAML.
· Désactiver votre application (arrêt des threads, calcul d'arrière-plan, etc.) lorsque cela n’est pas nécessaire.
· Lorsque les brosses sont redimensionnées une nouvelle texture est allouée pour la brosse. Garder cela à l'esprit les des redimensionnements !
· Lorsque Silverlight effectue une animation il redessine seulement les rectangles impropres. Évitez les animations à grande échelle.
· Définir le taux de rafraichissement de votre application à uniquement ce qui est nécessaire. Pour la vidéo environ 60, mais pour de l'animation environ 20 à 30.
Syndication : Mike Snow’s Weblog
Traduction autorisée par Mike Snow.