Visual rendering performance: Canvas, SVG, WebGL

Canvas (0-3000)

• Instruction drawing system
• Major factors affecting rendering performance
  • The number of graphs drawn
  • The size of the graph to draw

• To optimize the
  • Optimize canvas directive
    • To draw a graph based on vertices, there will be more vertices, and the drawing instructions can be optimized by reducing the number of vertices (switch graphics methods)
  • Use the cache
    • Off-screen canvas: offscreen canvas. When drawing, the drawing command is drawn directly through drawImage, and the graph does not need to be filled with fill() method
    • Limitations:
      • If there are too many drawing states, it is necessary to create a large number of off-screen canvas, which consumes large memory and reduces performance
      • It is suitable for graphic elements whose graph state itself is unchanged. If it changes frequently, the cache will be updated all the time. The cache update itself is also a drawing process, which cannot reduce the drawing instruction, but will cause more overhead because of the increase of drawImage instruction
      • DrawImage is a bitmap drawn through the cache, and a vector map is drawn directly, so the definition of the image drawn by the cache is not very good (fillText rendering text/drawing graph has a large scale)
  • Layered rendering (multiple Canvas)
    • limitations
      • A large number of static graphics do not need to be redrawn
      • Dynamic and static elements are drawn in a fixed order
  • Local redraw
    • Canvas Content clearReact controls refreshing dynamic regions
  • Optimize the filter
  • Multithreaded rendering

SVG (0-1000)

• Browser DOM rendering, the more elements, the more expensive.
• Major factors affecting rendering performance
  • Number of graphics drawn (SVG frame rate drops more when the number increases)
  • The size of the graph to draw

Webgl (> 3000).

• Rendering can be completed at one time by using the parallel processing capability of GPU.
• Major factors affecting rendering performance
  • Number of renders (batch rendering, the number of render elements is not directly related)
  • Number of shader executions
  • Complexity of shader operations