Want to make creations as awesome as this one?
Reuse this genially
Report content

More creations to inspire you

2021 TRENDING COLORS

Presentation

HISTORY OF THE CIRCUS

Presentation

LETTERING PRESENTATION

Presentation

SPRING HAS SPRUNG!

Presentation

BIDEN’S CABINET

Presentation

VACCINES & IMMUNITY

Presentation

UNCOVERING REALITY

Presentation

Discover more incredible creations here

Transcript

Fast TRALIS

1. Style caching

4. Backend message strategy

3. Render strategy

2. Data

Gain

1. Style Caching

After

Before

Cache divided in small pieces:

  • Circle
  • Text
  • Delay Halo
  • Delay text
  • Train

Only complete train style cached

First render could take 1 sec on low zoom level.

Thousand and thousands of canvas creation saved and particularly on first rendering.

No more than max 300-500 ms for one complex render.

Gain

2. Data

After

Before

Trajectories stored as object so no more scanned of everything on add/remove


We use raw data as much as possible

Each trajectory were a bit modified

Divide by 2 the time to update the list of 2000 trajectories.

Trajectories stored as array

Trjectories were scanned twice on each add/remove

Gain

3. Render strategy

After

Before

Time between render defined by level:


- zoom level 5 -> render every 5 seconds
- zoom level 16 -> render every 50ms

No need to wait 5 seconds the first render on zoom level 5.

Progressive rendering, data are rendered when they comes.

Render each time we receive data.
Render is throttled by zoom level:

- zoom level 5 -> at least one render every 500 ms
- zoom level 16 -> at least one render every 50 seconds

Gain

4. Backend message strategy

After

Before

WS delivers thousand on message on low level in few seconds.

Too much for the frontend to process

Frontend is releaved to try to render on every ms.

Frequency of message directly related to the throttle of rendering.
Progressive display on low zoom level faster.

Use batch of WS messages

Frequency of message defined by zoom level:
- zoom level 5 -> one message every 500 ms
- zoom level 16 -> one message every 50 ms

No more than 100 trajectories in one WS message.

What next

Separate detection of trajectory on hover. (maybe using WebWorker?)

Separate rendering of the hover/highlight effect. (maybe using WebWorker?)

Use Offscreen Canvas for rendering (WebWorker).

Completely move the Tralis API calls on a WebWorker so the main thread is only responsible to paint the canvas, should improve a lot the user navigation on the map.