Page 3 - JavaScript

Growing memory usage, sluggish interactions, and browser tabs that crash after hours: JavaScript applications with long lived pages frequently suffer from memory leaks that only become noticeable over time. This article covers the most common leak sources, practical use of heap snapshots in Chrome DevTools, and a step by step debugging workflow that reliably locates and fixes leaks.

Anyone embedding JavaScript or CSS from an external CDN is trusting that the provider will never be compromised. Subresource Integrity replaces that blind trust with a cryptographic checksum the browser verifies against the actual file content before execution, making silent supply chain attacks technically visible.

Interaction to Next Paint punishes every millisecond that passes between a click and a visible reaction. Systematically identifying Long Tasks and resolving them with yielding, the Scheduler API and event handler slimming lowers the INP number not by accident, but through traceable technical interventions.

JavaScript Numbers are 64-bit floats, and they silently lose precision for integers above 9 quadrillion (2^53). BigInt solves the problem: arbitrarily large integers without rounding errors, for IDs, cryptography, timestamps and financial calculations.

A single heap snapshot shows only one moment in time, but the three snapshot technique systematically exposes which objects stay in memory despite the garbage collector. Retainer paths show exactly which reference prevents release, turning a vague memory suspicion into a concrete cause in the code.

When a user opens the same web application in several tabs, many background tasks run in parallel without anyone noticing: token refresh, cache building, syncing with the server. The Web Locks API provides an exclusive lock across tabs of the same origin through navigator.locks, letting you coordinate such tasks and reliably prevent duplicate execution.

For a long time the browser cache was a black box. The Cache API gives developers full control over which requests get cached, how long they stay valid, and when they get replaced, independent of HTTP headers and browser heuristics.

Heavy canvas drawings, particle systems, or data visualizations tend to block the main thread and cause janky scroll and click experiences. OffscreenCanvas detaches the canvas element from the DOM and lets you run the entire rendering process inside a Web Worker, far away from user interaction.

The browser's main thread is a shared resource: animations, event handlers and rendering all compete with your business logic. requestIdleCallback resolves this conflict by shifting non-critical tasks into the browser's idle phases, without the user ever noticing.

Reactive programming is solved differently in every modern frontend framework, with incompatible APIs and abstractions hidden behind framework boundaries. The TC39 Signals proposal defines a universal foundation for the first time: Signal, computed, and effect as native JavaScript primitives that frameworks can build on.