COMP347 (Revision 10) | TrustOpen University
Upon completion of this expanded tutorial, students will be able to:
Building on the fundamentals of HTTP, this tutorial explores the advanced features that enable modern web applications to achieve high performance, security, and scalability. We delve into the internals of HTTP/2's HPACK compression and stream prioritisation, then examine HTTP/3 and QUIC—a radical departure from TCP that offers connection migration and reduced handshake latency.
We then analyse cookies from a security and privacy perspective, covering same‑site policies, session fixation, and best practices. The caching section is expanded with formal models of cache coherence, invalidation strategies, and a technical comparison of CDN routing architectures. Finally, we connect these concepts to modern performance metrics (Core Web Vitals) and show how HTTP‑level optimisations directly impact user experience.
Accept, Accept‑Encoding, Accept‑Language).Vary header to cache multiple variants.
The Vary header tells caches which request headers were used to select the response (e.g., Vary: Accept‑Encoding). This ensures that caches serve the correct variant to different clients.
| Algorithm | Compression Ratio | Speed | Use Case |
|---|---|---|---|
| gzip | Good | Fast | Widely supported, default for many servers |
| Brotli (br) | Better (~20% than gzip) | Slower (but still acceptable) | Modern browsers, static assets |
| zstd | Excellent | Very fast (decompression) | Emerging; used in some CDNs |
Range requests (using Range header) enable resumable downloads and byte‑serving for media. The server responds with 206 Partial Content and a Content‑Range header. The Accept‑Ranges header indicates server support.
HPACK (RFC 7541) compresses headers by:
:method, :path, user‑agent). References to static table entries are encoded as 1‑byte indices.This reduces header overhead from hundreds of bytes to a few bytes per request, significantly reducing latency, especially for small resources.
HTTP/2 allows clients to assign a weight (1–256) and dependency (parent stream) to each stream. The server uses this to allocate resources, ensuring that critical resources (e.g., CSS) are delivered before less critical ones (e.g., images). Priority is advisory; servers may implement different scheduling algorithms.
Server push allows the server to send resources that the client hasn't requested yet (e.g., pushing CSS along with HTML). While it can reduce round trips, it also risks over‑pushing (wasting bandwidth) if the client already has the resource cached. The Cache‑Digest extension can mitigate this, but push is less common now; preload and 103 Early Hints are often preferred.
QUIC (RFC 9000) is a multiplexed, secure transport built on UDP. Key features:
HTTP/3 uses QUIC streams to map HTTP requests and responses. Each request‑response pair uses a separate stream (similar to HTTP/2), but unlike HTTP/2 over TCP, a lost packet only affects the stream it belongs to, not the entire connection. This yields significant performance improvements under high loss.
Strict: only sent for same‑site navigations; strongest CSRF protection.Lax: sent for top‑level navigations (e.g., clicking a link); balances usability and security.None: sent cross‑site; requires Secure attribute and is used for third‑party integrations.HttpOnly and Secure, short session lifetimes, and rotate session IDs periodically.no‑cache) – high latency.max‑age. It offers high performance but may serve outdated content.stale‑while‑revalidate): serves stale content while asynchronously fetching a fresh copy; improves perceived performance.| Strategy | Description | Use Case |
|---|---|---|
| Time‑based (TTL) | Automatic expiry after max‑age | Static assets with predictable update cycles |
| Versioned URLs | Changing the URL (e.g., /v2/app.js) forces a new fetch | Immutable static assets |
| Purge | Explicitly remove a URL from all edge caches | CDN invalidation for urgent updates |
| Ban / soft purge | Mark a URL as stale; subsequent requests trigger a new fetch | CDNs (e.g., Fastly, Varnish) |
| Cache‑Digest (client‑side) | Client indicates which resources it has, avoiding server push of cached items | HTTP/2 push optimisation |
preconnect, prefetch, preload, prerender.Q1: What is the purpose of the Vary header?
It indicates which request headers were used to select the response, enabling caches to store multiple variants.
Q2: In HPACK, what are the two tables used for header compression?
The static table (predefined common headers) and the dynamic table (built incrementally from exchanged headers).
Q3: What is the main benefit of QUIC's connection migration?
It allows a connection to survive changes in IP address or port (e.g., switching from Wi‑Fi to cellular) without re‑establishing the connection.
Q4: Which cookie attribute prevents JavaScript from accessing the cookie?
HttpOnly.
Q5: What is the difference between SameSite=Lax and SameSite=Strict?
Strict blocks cookies for all cross‑site requests; Lax allows cookies for top‑level navigations (e.g., clicking a link).
Q6: What is a cache "purge"?
An explicit request to remove a resource from a cache (usually a CDN) to force a fresh fetch.
Q7: How does Anycast routing work in a CDN?
The same IP address is advertised from multiple edge locations; BGP routing directs the client to the topologically nearest edge.
Q8: What is the 103 Early Hints status code used for?
It allows the server to send preliminary headers (e.g., Link headers for subresources) before the final response, enabling the browser to start fetching early.
Q9: Which compression algorithm typically offers the best compression ratio for text content?
Brotli (br) generally offers better compression than gzip.
Q10: What is the stale‑while‑revalidate cache directive?
It allows a cache to serve stale content while asynchronously fetching a fresh version from the origin.
Q11: In HTTP/2 stream prioritization, what is the purpose of assigning a weight?
It indicates the relative importance of the stream, guiding the server's resource allocation.
Q12: What is the difference between a Range request and a conditional GET?
Range requests ask for a byte‑range; conditional GET asks for the full resource only if it has changed (using If‑Modified‑Since or If‑None‑Match).
Exercise 1 – HPACK Encoding
Explain how the header `:method: GET` would be encoded in HPACK.
`:method` is in the static table (index 2) and `GET` is also in the static table (index 3). The encoder would send an indexed header field with the combined index (e.g., a single byte representing the reference), resulting in very low overhead.
Exercise 2 – Cache Coherence
A news site updates articles every 5 minutes. Design a caching policy that balances freshness and performance.
Use `Cache‑Control: max‑age=300, stale‑while‑revalidate=60`. This serves cached content for 5 minutes; for the next 60 seconds, it serves stale content while revalidating, ensuring smooth user experience while keeping content reasonably fresh.
Exercise 3 – CDN Routing Comparison
Compare Anycast and DNS‑based routing in terms of latency, control, and resilience.
Anycast is faster (no DNS lookup) and resilient (BGP convergence handles failures), but offers less control (you can't steer traffic based on server load). DNS‑based offers fine‑grained control (load, health) but is subject to DNS caching and may not reflect optimal routing if the resolver is far from the client.
Exercise 4 – Cookie Security Assessment
Analyze a cookie: `Set‑Cookie: session=abc123; Path=/; Domain=.example.com`. What improvements are needed?
Missing `Secure`, `HttpOnly`, and `SameSite`. Also, `Domain=.example.com` allows subdomains. Add: `Secure; HttpOnly; SameSite=Lax; Max‑Age=3600`. Also consider using a more secure session ID (cryptographically random).
Exercise 5 – HTTP/3 vs HTTP/2 under Loss
Explain why HTTP/3 performs better under 5% packet loss compared to HTTP/2.
In HTTP/2 over TCP, a single lost packet blocks all streams on that connection (head‑of‑line blocking at TCP level) until retransmitted. In HTTP/3, each QUIC stream has independent loss recovery; a lost packet only affects its stream, so other streams continue without delay.
Exercise 6 – Performance Metrics
How does enabling Brotli compression affect LCP?
Brotli reduces the size of CSS, JS, and HTML, decreasing download time, which directly improves LCP (the time to render the largest contentful element). The compression overhead on the server is minor compared to the network savings.
Homework 1 – HPACK Dynamic Table Simulation
Simulate the dynamic table update for a series of HTTP/2 requests. Show how headers are added and referenced, and estimate the byte savings.
Use a simple header set (e.g., User‑Agent, Accept‑Language) and track the dynamic table index.
Homework 2 – QUIC vs TCP Performance Analysis
Write a technical report comparing the performance of QUIC and TCP under different network conditions (high latency, high loss, limited bandwidth). Include references to academic papers.
Look at the Google QUIC whitepaper and recent ACM IMC papers.
Homework 3 – Cache Invalidation Strategy Design
Design a cache invalidation strategy for an e‑commerce site with frequent price changes. Specify headers, purge mechanisms, and how to handle stale inventory.
Use short TTL (e.g., 60s) for product pages, ETag for validation, and a purge API for critical updates.
Homework 4 – CDN Cost‑Benefit Analysis
Estimate the cost and performance benefits of using a CDN for a global website, considering origin bandwidth, latency, and traffic spikes.
Calculate bandwidth savings from cache hit ratios, and latency reduction from edge proximity.
Homework 5 – Web Performance Optimization Plan
Create a comprehensive optimization plan for a slow web application, targeting LCP, FID, and CLS. Include specific HTTP‑level recommendations (compression, caching, protocol upgrades).
Prioritize impact: CDN, Brotli, HTTP/2, image optimization, and resource hints.
This expanded tutorial has delved into the advanced features that make HTTP a powerful, evolving protocol. Key insights:
HttpOnly, Secure, and SameSite to defend against XSS, CSRF, and hijacking.Understanding these advanced features enables engineers to build fast, secure, and scalable web applications.