AccueilClients

Applications et sites

  • Application métiersIntranet, back-office...
  • Applications mobilesAndroid & iOS
  • Sites InternetSites marketings et vitrines
  • Expertises techniques

  • React
  • Expo / React Native
  • Next.js
  • Node.js
  • Directus
  • TypeScript
  • Open SourceBlogContactEstimer

    Bonne pratique

    Limiter le recours aux canvas

    Ce que dit le référentiel

    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.

    Le "Référentiel d'écoconception web (REW)" est publié par GreenIT.fr dans le cadre des travaux du Collectif conception numérique responsable selon les termes de la licence Creative Commons Attribution.

    Plus d'informations sur collectif.greenit.fr et ecoconceptionweb.com.

    Notre avis

    Grâce à React.js, nous maximisons l'interactivité en utilisant des éléments HTML natifs et des composants React au lieu de recourir aux canvas. Cette approche réduit la demande en ressources matérielles et renforce l'efficacité énergétique des sites web.

    En combinant des bibliothèques natives et des frameworks React pour les animations légères, nous évitons les exigences élevées en CPU et GPU causées par les rendus canvas. Cela améliore l'expérience utilisateur, surtout sur des machines moins performantes.

    Règle de validation

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

    Ressources économisées

    Processeur
    Réseau
    Bonne pratique précédente
    Précédent
    Bonne pratique suivante
    Suivant
    18 avenue Parmentier
    75011 Paris
    +33 1 43 57 39 11
    hello@premieroctet.com

    Suivez nos aventures

    GitHub

    X

    Flux RSS

    Bluesky

    Naviguez à vue