Performance Testing

Evaluate rendering efficiency and memory management with this specialized performance testing environment for the SeatmapBookingRenderer.

The demo recursively initializes and destroys the renderer across multiple iterations to assess resource handling and rendering speed. The interface includes basic zoom control buttons (+ and -) that allow interaction testing during performance evaluation, helping developers identify potential bottlenecks in user interaction flows.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3
 4const eventId = '78c6e0d2-347e-424d-9d7a-ac092655bf56';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10};
11
12const el = document.getElementById('root');
13
14let renderer: SeatmapBookingRenderer | null = null;
15
16// If we run Multiple iteration at phone we can have canvas memory overflow.
17// Depending on the canvas size it could take up to 200 iterations
18const maxReInitializations = 50;
19
20const recursiveInit = (index = 0) => {
21  if (index > maxReInitializations) {
22    return;
23  }
24
25  if (index > 0) {
26    renderer?.destroy();
27  }
28
29  if (!el) {
30    return;
31  }
32
33  renderer = window.seatmapRenderer = new SeatmapBookingRenderer(el, settings);
34
35  renderer.loadEvent(eventId).then(() => {
36    console.log(`rendered iteration number ${index + 1}`);
37
38    recursiveInit(index + 1);
39  });
40};
41
42recursiveInit();

HTML

1<div id="root"></div>
2<div class="ZoomButtonList">
3  <div class="ZoomButton" onclick="seatmapRenderer.zoomIn()">+</div>
4  <div class="ZoomButton" onclick="seatmapRenderer.zoomOut()">–</div>
5</div>