BRUCE_FE Interview Notes - Complete HTTP/1 vs HTTP/2 Comparison

Key Differences Between HTTP/1.x and HTTP/2

HTTP/2 brings many significant improvements over HTTP/1.x, making web pages load faster and more efficiently:

Multiplexing: HTTP/2's Core Innovation

Multiplexing is HTTP/2's most important innovation, solving HTTP/1.x's head-of-line blocking problem:

HTTP/1.1:
Time →
Connection1: [---RequestA---][---RequestC---][---RequestE---]
Connection2: [---RequestB---][---RequestD---][---RequestF---]
      (Requires multiple TCP connections for parallel processing, requests serial within each connection)

HTTP/2:
Time →
Single connection: [--A--][--B--][--C--][--D--][--E--][--F--]
          (Multiple requests processed simultaneously within single connection, no need to wait for previous requests)

HTTP/2 multiplexing advantages, using Chrome browser as example:

• 1. Open Chrome DevTools, you'll see HTTP/2 websites use only one connection to download multiple files simultaneously, no more queuing
• 2. Web pages load faster because Chrome doesn't need to repeatedly establish multiple connections (connection count reduction clearly visible in Network panel)
• 3. Even on 4G networks, pages display faster because resource downloads no longer block each other
• 4. Developers no longer need to distribute resources across multiple subdomains (like static1.example.com, static2.example.com) to increase connection count
• 5. When you open many tabs, Chrome uses fewer system resources because the number of maintained connections is greatly reduced

Header Compression Significantly Reduces Transmission Volume

Imagine sending 10 letters to the same friend every day, each time having to repeat the same sender and recipient addresses. HTTP/1.1 is like this, each request must repeat sending the same header information:

// HTTP/1.1 Each request like filling out complete form again
GET /homepage.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (...)
Accept: text/html,application/xhtml+xml,...
Cookie: userID=123; loginStatus=loggedIn
// Total transmission: ~500 bytes

GET /image.jpg HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (...)
Accept: text/html,application/xhtml+xml,...
Cookie: userID=123; loginStatus=loggedIn
// Repeat transmission: ~500 bytes

While HTTP/2 is like a smart mail carrier:

// HTTP/2 Only need to inform of changes
[First request]
Table index=1: example.com
Table index=2: Mozilla/5.0 (...)
Table index=3: userID=123; loginStatus=loggedIn
Request: /homepage.html
// Total transmission: ~500 bytes

[Subsequent requests]
Use table index 1,2,3
Request: /image.jpg
// Only need to transmit: ~20 bytes

Actual effect: Open Chrome DevTools, you'll find HTTP/2 website request headers are only about 20% of HTTP/1.1 size. A webpage with 50 requests might save over 20KB of data transmission, significantly speeding up page loading on mobile networks.

Server Push: Delivering Resources Early

HTTP/2 server push is like a restaurant waiter not only bringing your ordered main course, but also proactively bringing you drinks and dessert:

Server Push is suitable for these scenarios:

• 1. Homepage essential CSS and JS (like restaurant knowing main course definitely needs utensils)
• 2. Images that almost all users will see (like hotel knowing guests definitely need water)
• 3. Next page user is likely to click immediately (like waiter predicting you might want dessert)

Although Server Push sounds great, there are some minor issues in actual use, such as possibly pushing resources the user already has, or pushing things the user doesn't need, like a waiter bringing you drinks you already have, or dessert you don't want to eat.

Binary Protocol Improves Parsing Efficiency

HTTP/1.x uses plain text format, like writing letters; while HTTP/2 adopts binary format, more like telegraph transmission:

Imagine: HTTP/1.1 is like letters written in natural language, mail carriers need to read the entire letter to know where to deliver; while HTTP/2 is like packages marked with barcodes, scanners can process immediately with one scan.

Binary protocol advantages are like upgrading from handwritten letters to email:

• 1. More efficient parsing - like scanning barcodes is much faster than reading addresses
• 2. More compact - like compressed files take up less space than original files
• 3. More reliable error detection - like tracking numbers on packages, knowing how big each part should be
• 4. Easier to implement multiplexing - like multi-lane highways, different vehicles can advance simultaneously

🔥 Common Interview Questions

One road only one car can pass
---------------------→
  🚗
---------------------→
       🚚
---------------------→
            🚌

One road multiple lanes simultaneous traffic
---------------------→
  🚗    🚚    🚌
=====================→

Client: I want HTML
Server: Here's HTML
Client: I also want CSS
Server: Here's CSS
Client: I also want JS
Server: Here's JS

Client: I want HTML
Server: Here's HTML
        Also giving you CSS and JS
        (I know you'll need them)