You developed an interactive airplane diagram with SVG, animations, and WebSocket. How did you optimize the rendering of SVG elements during mass status updates to prevent interface lag?

To optimize SVG rendering during mass status updates of seats in an interactive airplane diagram, several approaches were used:

• Debouncing and batching updates: collected all status changes over a short period and applied them in one operation to avoid frequent re-rendering.

• Using requestAnimationFrame: performed DOM and SVG attribute updates inside the requestAnimationFrame callback, which synchronizes updates with the browser's repaint and reduces load.

• Minimizing DOM changes: updated only those SVG elements whose status actually changed, instead of re-rendering the entire SVG.

• Using virtual DOM or libraries: in some cases, React or similar libraries were used to efficiently differentiate changes and update only necessary parts.

• Caching complex elements: for complex parts of the diagram, <symbol> and <use> in SVG were used to reuse elements without duplication.

• WebSocket optimization: on the server, data was aggregated and filtered so that the client received only necessary updates.

Example of using requestAnimationFrame to update SVG attributes:

let pendingUpdates = new Map();
let scheduled = false;

function scheduleUpdate(id, status) {
  pendingUpdates.set(id, status);
  if (!scheduled) {
    scheduled = true;
    requestAnimationFrame(() => {
      pendingUpdates.forEach((status, id) => {
        const elem = document.getElementById(id);
        if (elem) {
          elem.setAttribute('fill', status === 'occupied' ? 'red' : 'green');
        }
      });
      pendingUpdates.clear();
      scheduled = false;
    });
  }
}

// When receiving data via WebSocket, call scheduleUpdate for each seat