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


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:

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.

Other Related Blogs

Understand Debouncing in JavaScript with Examples

Anuj Sharma

Last Updated Jan 20, 2025

Understand the concept of Debouncing in JavaScript to improve the performance of your web application and optimize the event handling in JavaScript, by limiting API calls or DOM events.

What is javascript:void(0) and How it Works?

Anuj Sharma

Last Updated Jan 5, 2025

A comprehensive explanation about using javascript:void(0) in javascript. When to use javascript:void(0) and how it works with examples of using it with anchor tag.

Explained Web Authorization Techniques - Session & JWT

Anuj Sharma

Last Updated Jan 2, 2025

Understand important web authorization techniques to enhance role-based authentication for any web application with popular techniques like Session & JSON Web Token (JWT)

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.

Promise Polyfill in JavaScript - Step by Step Explanation

Anuj Sharma

Last Updated Jan 28, 2025

An Interview-focused explanation of Promise Polyfill in JavaScript which helps to understand both Functional and ES6 custom promise implementation.

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.

FrontendGeek
FrontendGeek

© 2024 FrontendGeek. All rights reserved