Skip to content

Latest commit

 

History

History
45 lines (30 loc) · 1.83 KB

BP_4013_en.md

File metadata and controls

45 lines (30 loc) · 1.83 KB

Limit canvas use

Identifiers

GreenIT V2 V3 V4

Categories

Life cycle Tiers Responsible
3. Implementation User/Device Software Architect/Developer

Indications

Priority Implementation difficulty Ecological impact
3 4 4
Saved resources
Processor / Network

Description

HTML canvas element is initially designed for drawing graphics, creating games, or generating images on-the-fly via JavaScript APIs. Like any script, the use of canvas has a significant impact on device resource requirements (CPU and/or GPU), worsening user experience on weaker devices and leading to energy overconsumption. This impact is greater when the rendering is done repetitively (dynamic effect, animation). It is recommended to use other native HTML elements when possible, or otherwise, to optimize the implementation to limit the device resource requirements.

Example

  • Only render when necessary.
  • Use window.requestAnimationFrame() instead of window.setInterval() for animations.
  • Avoid the use of heavy libraries.
  • Test rendering performance.

Sources

Validation rule

The number of ... is equal to or less than
canvas that can be replaced by an HTML element 0