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 http2 or http2s schemes. We continue using the http and https. This decision avoids so much trouble in upgrading the protocol.

While keeping the semantics as is, HTTP/2 introduces new “syntax”, featuring:

• connection preface,
• header compression,
• binary-encoded frames, and
• streams.

Connection Preface

The ultimate goal of the TLS handshake is safely exchanging the master secret for future secure communication.

TLS 1.2 Handshake

It takes 4 steps to complete the handshake before sending the first encrypted request from a browser:

1. Client Hello
2. Server Hello
3. Client key exchange and generate the master secret
4. Finished

Let’s take a look at the details.

Step 1 — Client Hello

The handshake starts with the Client Hello message from the browser. The message includes:

• the TLS version,
• a 28-byte random number (Client Random), and
• a list of cipher suites.

The random number is essential, and we will use it later. Let’s put it aside for now.

Step 2 — Server Hello

…

HTTP is the abbreviation of Hypertext Transfer Protocol. Its name tells us a lot.

Protocol

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

• clients (in our context, browsers),
• proxy servers, and
• origin servers

Two-players: browser and origin server

Cache-Control from the server

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.

With the 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:

• compress data
• send chunked data
• request data in a selected range

They are not exclusive. You can use all means together depending on use cases.

Compress data

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.

Root DNS servers

As of today, 13 root DNS servers serve the process for us.

1. Each root DNS server maintains a list of IP addresses of top-level DNS servers.
2. By visiting a top-level DNS server, the system receives the target authoritative DNS server’s IP address.
3. Finally, the authoritative DNS…

From a high-level view, the V8 JavaScript engine execution consists of 5 steps.

1. Initialize environment in the host
2. Compile JavaScript codes
3. Generate bytecodes
4. Interpret and execute bytecodes
5. Optimize some bytecodes for better performance

1. Initialize environment

Technically, this is not part of V8’s job. It is the renderer process of the browser initializes the following two items:

• Host environment
• V8 engine

Many find the following concepts are the complicated part of JavaScript:

• scope chain
• closure
• this

These concepts are more comfortable to understand than they look like, especially with the knowledge of the execution context.

What are these three concepts in common? They all relate to the variable lookup, the way the JavaScript engines looks for a variable.

Variable lookup

A variable lookup could be confusing in the following example.

When executing the isApple function, we have three stacked execution contexts in position:

• the global execution context
• the isBananafunction execution context
• the isApplefunction execution context

Next, the console begins looking up the apple…