Créer une scène de stress reproductible
Créez un état de test avec un nombre connu d'objets en mouvement, d'effets qui se chevauchent et d'étiquettes de texte. Capturez un enregistrement ou une graine fixe afin que chaque exécution présente à peu près le même travail. Comparez une scène de base vide avec une scène bondée, puis vérifiez si du temps est consacré aux mises à jour JavaScript, au dessin sur toile, au décodage d'images ou au travail de style et de mise en page.
Si le dessin domine, testez le regroupement de tracés similaires, la réduction des changements d’état inutiles ou le rendu des seules zones modifiées. Si la logique de mise à jour domine, profilez plutôt les tests de collision et les parcours d’objets. Le guide Canvas de MDN présente ces techniques comme des options à évaluer, pas comme des réglages universels garantissant une accélération.
Modifier un coût et vérifier le résultat
Choisissez un coût suspect, par exemple le redessin répété d’un arrière-plan statique. Mettez cet arrière-plan en cache dans un Canvas hors écran, puis comparez avant et après dans la même scène. Vérifiez le rendu à différentes tailles et après un redimensionnement : le cache peut être incorrect s’il utilise d’anciennes dimensions ou met le texte à l’échelle différemment.
Enregistrez l'appareil, le navigateur, la scène et l'action utilisés pour la comparaison. Un résultat provenant d'une machine est utile pour diagnostiquer cette exécution, mais il n'établit pas les performances de chaque navigateur ou appareil. Testez à nouveau l'interaction d'origine, car une optimisation qui améliore une scène synthétique peut toujours rendre la saisie pire ailleurs.
Questions sur performances d’un jeu Canvas
Dois-je redessiner uniquement les pixels modifiés ?
Cela dépend de la complexité de la scène et du coût des redessins complets. Le rendu partiel ajoute de la comptabilité et peut créer des pixels obsolètes autour des objets en mouvement, alors comparez les deux approches avec la même scène reproductible.
Les conseils de regroupement des opérations Canvas garantissent-ils un gain ?
Non. Ce sont des hypothèses utiles à tester. Mesurez le navigateur et la charge visés, puis gardez une modification uniquement si elle améliore le goulot observé sans nuire au rendu.
Pour aller plus loin
Vous avez repéré une information dépassée ? Signaler une correction