How JSON Works Behind the Scenes in Web Apps

yutilo — Thu, 08 Jan 2026 11:25:51 +0000

How JSON Works Behind the Scenes in Web Apps

A deep dive into serialization, parsing mechanics in modern JavaScript engines, security implications, and how data travels across the web.

For millions of developers, JSON (JavaScript Object Notation) is the heartbeat of the modern web. We call JSON.stringify() to send data and JSON.parse() to read it—often without a second thought.

But what actually happens under the hood? How does a JavaScript object in memory become a string, travel across the internet, and reassemble itself in milliseconds?

Let’s peel back the layers and explore how JSON truly works behind the scenes in modern web applications.

1. Serialization: From Memory to String

Everything begins with serialization. A JavaScript object in memory isn’t text—it’s a complex structure made of references, hidden classes, and values stored in RAM. Networks can’t transmit that structure directly, so it must be flattened into a linear format.

That’s exactly what JSON.stringify() does.

How Serialization Works

Recursive traversal of the object tree
Keys must be strings wrapped in double quotes
Values must be valid JSON types (string, number, boolean, null, object, array)
Functions and undefined values are removed
Circular references throw an error

TypeError: Converting circular structure to JSON

The `replacer` Function (Often Overlooked)

JSON.stringify() accepts a second argument—a replacer—that lets you filter or transform data during serialization.


const user = {
  name: "Alice",
  age: 30,
  password: "supersecretHash"
};

const json = JSON.stringify(user, (key, value) => {
  if (key === "password") return undefined;
  return value;
});

console.log(json);
// {"name":"Alice","age":30}

Security Tip: This is one of the safest ways to strip sensitive data before it leaves memory.

2. On the Wire: Headers, Encoding, and Compression

Once serialized, JSON becomes just text—but how it’s sent matters.

Content-Type Matters


Content-Type: application/json

This header tells the receiver how to interpret the payload.

Compression Is the Real Performance Boost

JSON is highly repetitive, which makes it extremely compressible.

Raw JSON: 5 MB
Gzipped/Brotli: ~800 KB

This is why JSON feels “fast” despite being text-based.

UTF-8 Encoding

JSON uses UTF-8 by default, allowing it to support every language and symbols—including emojis 🚀. If text appears corrupted, it’s almost always an encoding mismatch, not a JSON issue.

3. Deserialization: Turning Text Back Into Objects

When the JSON arrives, the receiving side must parse it. JSON.parse() reads the string character by character and reconstructs objects in memory.

How Modern Engines Optimize Parsing

Scan skipping: strings may not be fully scanned until accessed
Hidden class reuse for objects with identical shapes

Parsing large arrays of identical objects becomes surprisingly memory-efficient.

The `reviver` Function

Just like serialization, parsing supports transformation through a second argument.


const json = '{"name":"Event","date":"2025-01-01T12:00:00Z"}';

const data = JSON.parse(json, (key, value) => {
  if (key === "date") return new Date(value);
  return value;
});

console.log(data.date instanceof Date); // true

Performance Note: Using eval() to parse JSON is dangerous and slow. JSON.parse() is both safer and faster.

4. Security: Where JSON Meets Identity and Attacks

JSON plays a central role in authentication systems, especially through JSON Web Tokens (JWTs). A JWT is simply three JSON objects (header, payload, signature) encoded and joined together.

Common JSON Security Risks

JSON Injection: Never build JSON using string concatenation
Large Payload Attacks: Deeply nested or massive JSON can exhaust memory or stack space

Best Practice: Always enforce request size limits and nesting depth limits on APIs.

5. Handling Large and Complex Data

Big Numbers

JavaScript uses IEEE-754 numbers. Integers larger than 2^53 lose precision.


9007199254740993 === 9007199254740992 // true

Solution: Send large identifiers as strings.

Huge JSON Files

Parsing very large JSON files blocks the main thread and freezes the UI.

Better approaches include:

JSON Lines (JSONL)
Streaming parsers
Web Workers

6. The Future: JSON-LD and Semantic Data

JSON continues to evolve. JSON-LD adds semantic meaning and is widely used for structured data and SEO.


{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How JSON Works",
  "author": "JSONMaster"
}

This allows machines—not just humans—to understand what the data represents.

7. Beyond Basic JSON

As applications scale, developers rely on:

Query languages for JSON
Schema validation
Type generation for safer code
Visualization tools for deeply nested data

These practices are no longer optional at scale—they’re essential.

Conclusion

JSON is far more than curly braces and quotes. It’s a carefully designed data format optimized by browsers, compressed by networks, secured by best practices, and deeply integrated into how the web works.

Understanding serialization, transmission, parsing, and validation helps you build faster, safer, and more reliable web applications.

The next time you use JSON.stringify() or JSON.parse(), you’ll know exactly what’s happening behind the scenes—and why it matters.

Discussion

Have you ever debugged performance issues caused by large JSON payloads?
Do you still encounter APIs sending numbers that should be strings?
What’s the biggest JSON mistake you’ve seen in production?

Let’s discuss 👇

Some of greate tools for json - jsonmaster , jsonlint

DEV Community: yutilo

[Boost]