Though HTTP/3 is still in draft today, teams such as Shopify and Medium have implemented it in production.
Here is a screenshot of Medium homepage requests. Most of them are through the HTTP/3 protocol noting as
h3 stands for HTTP/3, and the
29 is the implemented draft's version.
Though the latest draft is version 34, all known teams choose version 29 as it was a significant update. The differences in later versions are minimal.
Why we need HTTP/3? An important reason is solving the head-of-line blocking issue.
TLS helps improve security. Now it is time for performance enhancement, the focus of HTTP/2 design.
The first challenge is making it compatible with HTTP/1.x.
To achieve it, HTTP/2 inherits semantics from HTTP/1.x, including request methods, status codes, headers, etc.
Most importantly, it inherits the scheme design. There is no
http2s schemes. We continue using the
https. This decision avoids so much trouble in upgrading the protocol.
While keeping the semantics as is, HTTP/2 introduces new “syntax”, featuring:
The ultimate goal of the TLS handshake is safely exchanging the master secret for future secure communication.
It takes 4 steps to complete the handshake before sending the first encrypted request from a browser:
Let’s take a look at the details.
The handshake starts with the Client Hello message from the browser. The message includes:
The random number is essential, and we will use it later. Let’s put it aside for now.
An HTTP request is expensive.
Whenever possible, we reach out to cache, which keeps (almost) the latest resource.
Cache lives at every node of the network, including
If you have saved an edit in a Medium post, you want other visitors to see the updated one.
Which player knows whether the content is the latest one?
A browser doesn’t know without sending a request. The server holding resources is the one knowing it.
Cache-Control header, the server informs the browser when to use cache or request new resources.
In the early era of the network, people send files in single-digit KB size. In 2021, we enjoy hi-res MB-size images and watch 4K (soon 8K) video in several GB.
Even with a good internet connection, it still takes a while to download a 5GB file. If owning an Xbox or PlayStation, you know how it feels.
We have three ways to shorten the time sending extensive data by HTTP:
They are not exclusive. You can use all means together depending on use cases.
To compress data, we need…
Because of the TCP/IP model, a browser requires the target server’s IP address to request resources.
For us, it is nearly impossible to remember numbers in an IP. However, it is straightforward to identify a domain name.
But how a browser acquires the IP address from a domain?
The process is domain name resolution.
As of today, 13 root DNS servers serve the process for us.
Technically, this is not part of V8’s job. It is the renderer process of the browser initializes the following two items:
These concepts are more comfortable to understand than they look like, especially with the knowledge of the execution context.
A variable lookup could be confusing in the following example.
When executing the
isApple function, we have three stacked execution contexts in position:
isBananafunction execution context
isApplefunction execution context
Next, the console begins looking up the
What is a scope from the execution context point of view?
The global scope is the global execution context, and the function scope is related to the function execution context.
The block scope, introduced in ES6, is different from its two siblings.
The easiest way to understand the block scope is by comparing it with the other two scopes.
A variable works similarly in a global and function scope, so I will only talk about the global scope and the block scope in this post.
a coder 👨💻