Why real-time matters in Node.js - Performance Evidence

Performance: Why real-time matters

HIGH IMPACT

This concept affects how quickly users see updates and interact with live data, impacting responsiveness and user experience.

Delivering live updates to users in a chat application

Node.js

const socket = new WebSocket('wss://example.com/chat');
socket.onmessage = event => renderMessages(JSON.parse(event.data));

Using WebSocket pushes updates only when new data arrives, reducing unnecessary work.

📈 Performance GainReduces network requests to only when needed, lowering CPU load and improving INP.

Delivering live updates to users in a chat application

Node.js

setInterval(() => {
  fetch('/messages').then(res => res.json()).then(data => renderMessages(data));
}, 1000);

Polling every second causes unnecessary network requests and CPU usage even when no new data exists.

📉 Performance CostTriggers frequent network requests and CPU work every second, increasing INP and battery use.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Polling every second	High (updates every second)	High (layout recalculations each update)	High (repaints each update)	[X] Bad
WebSocket push updates	Low (only on new data)	Low (fewer layout recalculations)	Low (fewer repaints)	[OK] Good

Rendering Pipeline

Real-time data flows from the server to the client, triggering JavaScript to update the DOM and repaint the UI.

→JavaScript Execution

→Layout

→Paint

→Composite

⚠️ BottleneckJavaScript Execution when processing frequent updates

Core Web Vital Affected

INP

This concept affects how quickly users see updates and interact with live data, impacting responsiveness and user experience.

Optimization Tips

1Avoid frequent polling; prefer push-based real-time updates.

2Batch DOM changes to minimize layout and paint work.

3Monitor CPU and network usage to keep interaction smooth.

Performance Quiz - 3 Questions

What is a main performance problem with polling for real-time updates every second?

A It causes unnecessary network and CPU usage even when no new data is available.

B It reduces the number of DOM updates.

C It improves Largest Contentful Paint (LCP).

D It decreases JavaScript execution time.

DevTools: Performance

How to check: Record a session while interacting with the app; look for frequent scripting and layout events caused by updates.

What to look for: High CPU usage spikes and many layout recalculations indicate inefficient real-time update handling.