Optimizing canvas
<canvas>
es uno de los estándares más utilizados para la representación de gráficos 2D en la Web. Se utiliza ampliamente en los juegos y visualizaciones complejas. Sin embargo, as Web sites and apps push canvas to the limits, el rendimiento comienza a sufrir. This article aims to provide suggestions for optimizing your use of the canvas element, to ensure that your Web site or app performs well.
A continuación una lista de tips par mejorar el rendimiento:
- Repintar primitives similares o objetos repetidos dentro y fuera de la pantalla canvas.
- Batch canvas calls together (for example, draw a poly-line instead of multiple separate lines).
- Avoid floating-point coordinates and use integers instead.
- Avoid unnecessary canvas state changes.
- Render screen differences only, not the whole new state.
- Utilice varios lienzos en capas para escenas complejas.
- Evite la propiedad
shadowBlur
siempre que sea posible. - Con las animaciones, use
window.requestAnimationFrame()
. - Probar el rendimiento con JSPerf.