1. Apply colours to a drawing mechanism
  2. Rendering performance analysis
  3. Non-real-time rendering (Real-time rendering)
  4. Shard rendering
  5. Split canvas pixel split rendering

Apply colours to a drawing mechanism

  • Canvas drawing mechanism: The whole Canvas is a drawing board on which various graphics are drawn. Once drawing errors need to be corrected, it needs to be redrawn.

    . ,0,10,10 CTX. FillRect (0); ctx.clearRect(100, 100, 100, 100); ,0,100,100 CTX. FillRect (0);Copy the code

Rendering performance analysis

Note that graphics calculations such as complex graphics derivation are not analyzed in terms of rendering performance.

The main analysis of rendering performance is as follows:

  • Number of pixels rendered (cone contents [current viewport contents])
  • Frequency of rendering primitives (such as interactive analysis, which requires real-time refreshes)

Corresponding optimization means

  • Control visual area data.
  • Reduce the refresh frequency or slice the action behavior.
  • Instant rendering and asynchronous rendering.
  • Fragment/off-screen render/Global Render Local render.
  • .

Non-real-time rendering

Instant rendering refers to the execution of callback as soon as the user interaction is triggered. Consider the following scenario:

A user controls the entity color N times in 16ms. We have two solutions:

  1. Each trigger is redrawn with draw() N times.
  2. Perform draw() every 16ms to draw the final rendered result.

Shard rendering

Sharding rendering is essentially the shredding of a list, splitting one render into multiple renders. Reduce the number of pixels to increase the frame rate.

As can be seen from the above figure, fragmented rendering will lead to longer overall rendering time, so this scheme is not used as a performance optimization scheme for rendering, but as an optimization scheme for improving frame rate and response effect.

Split canvas split meta rendering (also called sharding)

Imagine a scene in which there are a lot of primitives on the canvas divided into categories like text, basic geometry… And the text content is a lot of update frequency is very low almost no update how to design reasonable? I will give you an idea. I will use two canvases to draw the two parts of text and Shape. This reduces the amount of updated content and increases the frame rate (see figure below).

The last

Visual architecture design, source code learning, daily development. I’m going to share it step by step. Please check out my follow-up if it’s helpful. If you need me, you can add my contact information (on my homepage, you can join the group chat).