What happens from entering the URL in the browser to rendering the page?

This is one of the most common interview questions and I will answer it with what I have learned.

Start from TCP/IP

When we enter a web address, such as ‘juejin. Cn ‘, our computer tries to get resources based on that address. Parsing and rendering the obtained resources onto the screen is all we need to do to access a URL.

The first step in this process is to access the server that hosts the resource and establish a connection.

This requires the help of the TCP/IP protocol family

The TCP/IP protocol model is roughly the same as the OSI reference model, but there are differences.

We know the network technology, with this TCP/IP model of the four layers of the main, so this paper will be based on the TCP/IP four layers of the model for analysis one by one

The overview

In the TCP/IP model, each layer serves the layer above it. And each of the top layers, through the services of the bottom layer, performs its own function.

After entering the URL, an HTTP data packet is generated from the application layer. And passes the message down.

However, the transport layer takes the message and cannot modify it. Therefore, a TCP header is added to the header of the packet to complete the functions of the transport layer through the information in the header.

Similarly, the network layer adds its own request header to the header of the packet to form a new packet and send it to the next layer.

It is worth noting that the data link layer encapsulates IP datagrams into frames and adds its own data to the header and tail.

In this way, the final data is converted into electrical signals at the physical layer and sent over the cable to the server.

The server takes the data and deconstructs it layer by layer in the same way. Until the application layer receives the required data packet.

Then return the data requested by the client according to the corresponding information. This completes a network communication.

The layer we are dealing with directly is the application layer

The most important protocol at the application layer is HTTP. Our browsers use this protocol to communicate with each other and do what we need

Web caching

After entering the URL and pressing Enter, our browser will determine if we have added a resource with that address. If it is loaded, it goes into the HTTP cached program.

The purpose is to reduce the number of requests, reuse resources, and improve network performance.

HTTP caching is divided into mandatory caching and negotiated caching

Mandatory cache

Strong caching is controlled by the cache-control field in HTTP-HEADERS. Resources that carry this field are cached in the browser the first time they are loaded.

The next time the resource is loaded, there is no need to send the request to the server again because of the local cache.

Cache-control has several common values:

  • No-cache indicates no mandatory cache
  • Max-age indicates the maximum survival time
  • No-store does not require or negotiate caching
Negotiate the cache

In the case of a forced cache expiration, the negotiated cache is entered.

The negotiated cache is typically identified by two fields: ETag and last-Modified

ETag: consists of a string indicating whether the resource needs to be reloaded. The resource is not updated, the ETag is unchanged, and no reload is required. The new resource and the new ETag are returned to the client.

Last-modified: indicates the time when the resource was Last Modified. This time is different from the time stored on the server, indicating that the resource has been updated. New resources need to be returned. If they are the same, they are not updated. Cache is used.

We negotiate caching, and the result is we can use caching. The 304 status code will be returned.

DNS service

After the judgment of the cache, if we can’t use the local cache, we have to honestly go to the server to request data.

The first step in requesting data is to translate the entered URL into the DESIRED IP address for the network

The URL we enter is usually easy to remember, such as ‘www.baidu.com’, but this is not easy for computers to remember. Therefore, the computer uses the DNS server to convert the domain name into an IP address, and then accesses the resources we need through a server uniquely identified by the IP address.

The Domain Name System (DNS) is also cached.

As with Web caching, the goal is to reduce the number of times requests are sent.

DNS caches exist in browsers, hosts. If none of them exists, the system continuously searches the DNS server to obtain the IP address corresponding to the domain name recorded in the DNS.

DNS has load balancing, that is, if a domain name is accessed too much, the server at this IP address receives too much traffic. In this case, load balancing is triggered, and one domain name corresponds to multiple IP addresses, which are recorded in DNS. In this way, access to the same domain will be scattered.

The HTTP protocol

With that said, let’s take a look at the most important Http protocol

The HTTP status code
  • 200 Request succeeded
  • 3 xx redirection
    • 301 permanent redirect
    • 302 Temporary redirect
    • 304 Hit cache
  • 4XX Client Error (Bad Request)
    • 404 No address found
    • 403 No access permission
  • 5XX Server error
    • 503 The server is maintained or stopped
http-headers

Both RES and REQ are available:

  • Cache-control Whether to Cache resources (no-cache/max-age= “”)
  • Connection management keep-alive/close
  • Cookie Indicates data transmitted between two parties

Request:

  • Accept Indicates the format of the received data
  • Accept-encoding /Language Compression algorithm/receiving Language
  • Host Specifies the domain name and port number of the requested server
  • UserAgent User browser

The response:

  • Content-type What file type does the server tell the browser that the data it sends belongs to
  • Content-length Indicates the data size
  • Content-encoding Indicates the data decoding mode
  • ETag/ last-modified Criteria in the cache above
HTTPS

HTTPS is a security enhanced version based on HTTP. We know that HTTP at the application layer is transmitted in plain text and is directly operated by TCP, which poses serious security problems.

HTTPS adds an SSL layer between HTTP and TCP to encrypt information, ensuring user information security

HTTP Request Mode
  • Traditional: GET/POST is a way of treating urls as features (actions)
  • RestfulURL:
    • I’ll get it.
    • The post to add
    • Patch/put change
    • Delete delete

    Restful urls treat urls as resources that identify different operations through different request methods

The key to controlling transport: transport layer

TCP protocol

TCP is the most important protocol at the transport layer. It has two main characteristics:

  • connection-oriented
  • Reliable (guaranteed)

As we know, TCP is built on IP, which is an unreliable protocol. So how can TCP be reliable?

The TCP client (requesting connection) establishes a three-way handshake with the server (requested connection).

  • On the first handshake, the client sends a SYN to the server saying, “I want to establish a connection.”
  • On the second handshake, the server returns an ACK+SYN saying “I received the request and I want to establish a connection.”
  • For the third handshake, the client returns an ACK saying, “I can receive your message.”

And so the three handshakes were complete. During the three-way handshake, the two parties enable their own ports and wait for the resources to be sent by the other party. Through these three handshakes, both parties know that they can receive the message sent by the other party and that they can also send the message to the other party. So it can be said that the connection is established while the connection is reliable.

Why three handshakes and not two or four?

Twice is definitely not a good idea, and skipping any steps will not ensure that the message you sent will be received.

Four times is ok, even 1,000 times is ok. But three times is enough

Four waves (break up)

Four waves is the disconnection step

  • The first wave breaker (presumably the client) sends a FIN saying “I want to disconnect (I have no more data to send)”.
  • On the second wave, the server receives the fin and replies with an ACK that says, “Ok, you can stop sending (but still need to receive).”

The client receives this ACK and closes the sending process, freeing resources.

  • For the third wave, the server sends a FIN that says, “I’m going to disconnect too, even if I don’t have any data to send.”
  • Wave the client for the fourth time to send an ACK and wait for 2MSL to shut down the process and release resources. The client receives the ACK and releases the resource.
Why can’t it be three times?

Thrice generally refers to the combination of the second and third. The merge cannot be done because, after the second time, the requested break party still has resources to send. If you merge, you can’t send it.

If the time is too long, the client will think that the other party did not receive the message and send it again.

Why wait 2MSL before sending

To ensure that the other party can receive the ACK, if the other party can not receive the ACK, they close the connection. Then the receiving port of the other side will always be open, which will cause waste and vulnerable to attack.

UDP protocol.

UDP is an unreliable packet – oriented transport protocol

UDP is better than TCP in speed. UDP does everything possible to deliver data, allowing data loss.

UDP is usually used in applications that need to happen all the time, such as voip

How do our networks connect: the Network layer

The protocol at the network layer is IP, which performs packet switching on data packets.

The network layer has a very powerful function, which is simply summarized as finding the MAC address of the next target through the IP address.

In a hop hop transmission mode, we have the IP address of the destination, but we don’t know the MAC address of the destination. Only one stop one “jump” to the finish line.