𝗛𝗼𝘄 𝗱𝗼 𝘆𝗼𝘂 𝗽𝗿𝗲𝘃𝗲𝗻𝘁 𝗨𝗜 𝗹𝗮𝗴 𝘄𝗵𝗲𝗻 𝗿𝗲𝗰𝗲𝗶𝘃𝗶𝗻𝗴 𝗼𝘃𝗲𝗿 𝟭𝟬𝟬 𝗪𝗲𝗯𝗦𝗼𝗰𝗸𝗲𝘁 𝗲𝘃𝗲𝗻𝘁𝘀 𝗽𝗲𝗿 𝘀𝗲𝗰𝗼𝗻𝗱?

#javascript #websockets

"𝗛𝗼𝘄 𝗱𝗼 𝘆𝗼𝘂 𝗽𝗿𝗲𝘃𝗲𝗻𝘁 𝗨𝗜 𝗹𝗮𝗴 𝘄𝗵𝗲𝗻 𝗿𝗲𝗰𝗲𝗶𝘃𝗶𝗻𝗴 𝗼𝘃𝗲𝗿 𝟭𝟬𝟬 𝗪𝗲𝗯𝗦𝗼𝗰𝗸𝗲𝘁 𝗲𝘃𝗲𝗻𝘁𝘀 𝗽𝗲𝗿 𝘀𝗲𝗰𝗼𝗻𝗱?"

They clarified that the issue is not related to the server or backend but rather how to approach and resolve it on the frontend.

This made me think for a while, and then I realized that we often use these techniques—knowingly or unknowingly. We are familiar with these concepts, but they often come with technical jargon.

Let me explain these techniques as simply as possible.

To stop UI lag from 100+ WebSocket events per second, you must decouple the high-frequency message stream from the main rendering thread.
Throttle or buffer the events, batch your DOM updates using requestAnimationFrame, and offload heavy processing to a Web Worker.

Implementing these targeted strategies will stabilize your frame rate:

1. Throttle or Buffer the Event Stream
Never update the UI on every single WebSocket message. At 100+ events per second, your browser is forced into constant layout recalculations (reflows) and repaints.
• 𝗧𝗵𝗿𝗼𝘁𝘁𝗹𝗶𝗻𝗴: Use libraries like Lodash to limit state updates to a maximum of 10–15 frames per second
• 𝗕𝘂𝗳𝗳𝗲𝗿𝗶𝗻𝗴: Push incoming events into an array. Set up an interval or a requestAnimationFrame loop that drains this array, processes the aggregated data, and updates the UI once per cycle.

𝟮. 𝗕𝗮𝘁𝗰𝗵 𝗗𝗢𝗠 𝗨𝗽𝗱𝗮𝘁𝗲𝘀
If you are updating UI components individually for every event, you will overwhelm the event loop.
• Batch multiple data points into a single state update.
• Use requestAnimationFrame to schedule your DOM updates so they align perfectly with the browser's refresh rate.

𝟯. 𝗢𝗳𝗳𝗹𝗼𝗮𝗱 𝗛𝗲𝗮𝘃𝘆 𝗣𝗿𝗼𝗰𝗲𝘀𝘀𝗶𝗻𝗴 𝘁𝗼 𝗮 𝗪𝗲𝗯 𝗪𝗼𝗿𝗸𝗲𝗿
  • If you need to parse, filter, or transform the incoming payload data before displaying it, do not do this on the main JavaScript thread.
  • Move your WebSocket connection and data parsing logic into a Web Worker.
  • The worker can handle the 100+ events per second, aggregate or reduce the data, and only send a condensed, render-ready payload back to the main UI thread periodically.

𝟰. 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗲 𝗥𝗲𝗮𝗰𝘁𝗶𝘃𝗶𝘁𝘆 𝗮𝗻𝗱 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗥𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴
If you are using frameworks like React, Vue, or Angular, uncontrolled state updates will trigger massive re-render cascades.
• 𝗥𝗲𝗮𝗰𝘁: Use useMemo and useCallback to prevent unnecessary component re-renders. Avoid storing rapidly changing WebSocket data directly in component state; instead, use a mutable ref for the raw data and sync to state on a throttled interval.
• 𝗩𝗶𝗿𝘁𝘂𝗮𝗹𝗶𝘇𝗮𝘁𝗶𝗼𝗻: If rendering these events in a list or table, use windowing libraries (like TanStack Table or Virtuoso) so the DOM only renders the rows currently visible on the screen.

𝟱. 𝗨𝘁𝗶𝗹𝗶𝘇𝗲 𝗗𝗼𝗰𝘂𝗺𝗲𝗻𝘁 𝗙𝗿𝗮𝗴𝗺𝗲𝗻𝘁𝘀
For vanilla JavaScript implementations, avoid appending elements to the DOM in a loop. Instead, create a DocumentFragment, append your newly processed elements to it, and then append the entire fragment to the live DOM in one single operation