BP_4013_fr.md

Limiter le recours aux canvas

Identifiants

GreenIT	V2	V3	V4

Catégories

Cycle de vie	Tiers	Responsable
3. Réalisation (fabrication / développement)	Utilisateur/Terminal	Architecte Logiciel/Développeur

Indications

Degré de priorité	Mise en oeuvre	Impact écologique
3	4	4

Ressources Economisées
Processeur / Réseau

Description

L'élément HTML canvas est initialement conçu pour dessiner des graphiques, réaliser des jeux ou générer des images à la volée via des API JavaScript. Comme chaque script, l'utilisation de canvas a un impact significatif sur les besoins de ressources machines (CPU et/ou GPU), augmentant ainsi une mauvaise expérience utilisateur sur les machines les moins puissantes et entraînant également une surconsommation d'énergie. Cet impact est plus important quand le rendu est réalisé de manière répétitive (effet dynamique, animation). Il est recommandé d'utiliser d'autres éléments HTML natifs quand cela est possible et à défaut de mettre en place des optimisations pour limiter les besoins en ressources machines.

Exemple

• Faire les rendus uniquement si nécessaire.
• Avec les animations, utiliser window.requestAnimationFrame() plutôt que window.setInterval().
• Limiter l'utilisation de bibliothèques lourdes.
• Tester les performances de rendu.

Sources

• Élément canvas
• Optimiser les canvas

Principe de validation

Le nombre ...	est inférieur ou égal à
de canvas pouvant être remplacés par un élément HTML	0