Blog/NotesConcept

HTTP/2 vs HTTP/1.1: What's the Key Difference?

Understand the difference between HTTP/2 vs HTTP/1.1 based on the various parameters, which helps to understand the improvement areas of HTTP/2 over HTTP 1.1

beginner

Anuj Sharma

Last Updated Jan 29, 2025


Advertisement

Its important to know the latest enhancements in the protocols to take the better decision while choosing between HTTP/2 vs HTTP/1.1. This decision can be based on the functionality (like web sockets doesn't support HTTP/2) or the server requirements.

Let's check out the major features of both widely used protocols and the difference between HTTP/2 and HTTP/1.1

HTTP/1.1 Major Features

Here the the major features introduced as part of HTTP/1.1 protocol.

Partial Content with Range Request

Range Request header is the essential part of streaming applications now a days, where partial data can be stream from server to client. This allows to send the partial content rather than downloading the whole file.

// First 500 bytes
HTTP/1.1 200 OK
Range: bytes=0-499

// Next 500 bytes
HTTP/1.1 200 OK
Range: bytes=500-999

Persistent Connections (Keep-Alive)

Before HTTP/1.1 for every new request a new TCP connection got established, with persistent connection using the Keep-Alive Response Header, a single TCP connection is maintained for the communication by default. This overall reduced the latency by eliminating the TCP handshake and improve the performance.

// Example
HTTP/1.1 200 OK
Connection: Keep-Alive
Content-Encoding: gzip
Keep-Alive: timeout=5, max=200

Chunked Transfer Encoding

Transfer-Encoding chunked allows sever to send the dynamic generated data without know the total size of the content. This helps in streaming large responses easily.

// Example
HTTP/1.1 200 OK
Transfer-Encoding: gzip, chunked

Host Header

Before HTTP/1.1, each IP can server only single website per domain. HTTP/1.1 introduced Host request header so that multiple IPs can be mapped to the single website.

// Example
HTTP/1.1 200 OK
Host: frontendgeek.com
Connection: Keep-Alive
Content-Encoding: gzip
Keep-Alive: timeout=5, max=200

HTTP/2.0 Major Improvements

HTTP/2.0 is based on Google's SPDY project, named after SPeeDY which shows its fast and compression nature. Here are the major features/improvements over HTTP/1.1

Binary Protocol (Binary Framing Layer)

HTTP/1.1 uses the plain text format which requires complex parsing, but HTTP/2 introduced binary format using binary framing layer which reduced errors and improve efficiency. Overall this makes the communication between client and server faster and more reliable.

Request and Response Multiplexing

In HTTP/2 Bi-directional communication (Multiplexing) can happen on the same TCP connection. It allows multiple requests and responses to be sent over single TCP connection parallelly. No need to create different TCP connections for different requests. Means it only requires 1 TCP connection per origin.

It solved the major issue of sequential handling of requests from HTTP/1.1 protocol. 

Header compression using HPACK 

In HTTP/2, compression happened for both request and response headers using HPACK, meaning less data transfer between client and server. This overall reduced the overhead in the communication which results into lesser bandwidth utilization and faster loading.

Server push

Before HTTP/2, the server could send only a single response per request, but with the server push the server sends multiple responses to the client for a single request. For example If a client requests an HTML file, the server can also send CSS and JS files proactively without even requested by client.

Server push overall reduce the round trips required for the assets resulting faster web application.

Major Differences Between HTTP/2 vs HTTP/1.1

Here are the major differences between HTTP/2 vs HTTP/1.1

Comparison  HTTP/1.1 HTTP/2
Protocol Type  Text based Binary based
Header compression NO ❌ Compressed Header
Multiplexing Support  NO ❌ YES ✅
Server Push Support  NO ❌ YES ✅
Latency High Low

Next, Read

Frontend System Design Concepts


Share this post now:

Advertisement

💬 Comments (0)

Login to comment

Advertisement

Flaunt You Expertise/Knowledge & Help your Peers

Sharing your knowledge will strengthen your expertise on topic. Consider writing a quick Blog/Notes to help frontend folks to ace Frontend Interviews.

Advertisement


Other Related Blogs

Understand JavaScript Date Object with Examples (for JavaScript Interviews)

Anuj Sharma

Last Updated Jan 9, 2025

Go through different ways to display dates using javascript date object. It covers examples of date object usage to understand the main concepts of javascript date object.

What is CORS ? Cross-Origin Resource Sharing Explained [For Interviews]

Anuj Sharma

Last Updated Dec 10, 2024

A brief explanation of Cross-Origin Resource Sharing (CORS) concept to enable client application accessing resources from cross domain and HTTP headers involved to enable resource access.

Promise.all Polyfill in JavaScript - Detailed Explanation [For Interviews]

Anuj Sharma

Last Updated Jan 16, 2025

Deep dive into promise.all polyfill in javascript will help to understand the working of parallel promise calls using Promise.all and its implementation to handle parallel async API calls.

How to Format Phone Number in JavaScript (JavaScript Interview)

Anuj Sharma

Last Updated Jan 9, 2025

Learn the best & quickest way to format phone number in JavaScript with or without country codes. This will help websites to show the phone numbers in a more human-readable format.

5 Different Ways to Reload Page in JavaScript (Frontend Interview)

Anuj Sharma

Last Updated Jan 17, 2025

Explore the 5 most efficient ways to Refresh or Reload page in JavaScript similar to location.reload(true), and identify the appropriate use cases to use one of these different approaches.

5 Ultimate Rules to master this keyword in JavaScript

Anuj Sharma

Last Updated Feb 22, 2025

Easy to understand 5 rules, that cover the behaviour of the "this" keyword in different contexts and helps you to master this keyword for any javascript interview.

FrontendGeek
FrontendGeek

© 2024 FrontendGeek. All rights reserved