This is the 14th day of my participation in the August More Text Challenge, for more details: August more Text Challenge!

What happens when YOU type the URL into the carriage return?

There are the following operations

  • URL parsing
  • The DNS query
  • A TCP connection
  • The HTTP request
  • Respond to the request
  • Page rendering

details

URL parsing

First, the browser determines whether you have entered a valid URL or a keyword to search for, and acts accordingly.

The URL follows a standard syntax consisting of six parts: protocol, host name, domain name, port, path, and file name. The port can be omitted. Specific syntax rules are as follows:

www.juejin:8080/path/filena…

In the preceding syntax rules, HTTPS indicates the protocol, host indicates the host name, juejin indicates the domain name, 8080 indicates the port (which can be omitted), path indicates the file path, and filename indicates the filename.

The DNS query

(THE DNS query process is also a focus, space is limited, not to expand here, the next article will be written to review the explanation)

The query process is as follows:

A TCP connection

After the IP address of the target server is determined, the TCP connection is established through a three-way handshake

The HTTP request

When a TCP connection is established, communication can take place on this basis, and the browser sends HTTP requests to the target server. Request content includes: request line, request header, blank line and request data four parts.

  • The request line

    The request line is divided into three sections: request method, request address URL, and HTTP protocol version, separated by Spaces

    Request method

    GET, POST, DELETE, PUT…

    Please see:

  • The request header

The request header adds some additional information to the request packet. It consists of name/value pairs, one for each line, separated by colons

  • The request data

Request data is not used in the GET method, but in the POST method. The POST method is suitable for situations where a customer needs to fill out a form. The longest used request headers associated with request data are cnten-type and Content-Length

Respond to the request

When the server receives the browser request, it performs a logical operation and returns an HTTP response message, including:

  • The status line

    It consists of the protocol version number, status code, and status message

    (The status code will not be expanded, which is also an important interview question)

  • Response headers

    Some additional information about what the client will use

  • A blank line

    A blank line after the message header is required

  • In response to the body

    Text information returned by the server to the client

When the page is closed, the TCP connection is broken with four waves

Page rendering

When the browser receives a resource from the server, it first parses the resource:

  1. View the content-Type value of the response header, which is parsed differently depending on the resource Type
  2. View the information in the response header and perform corresponding actions according to different instructions

The rendering process for the page is as follows:

  • Parse the HTML and build the DOM tree
  • Parses the CSS and generates the CSS rule tree
  • Combine DOM tree and CSS rules to generate render tree
  • Render tree (Layout/reflow), responsible for each element size, location calculation
  • Render the Render tree (paint), which draws the page pixel information
  • The browser sends each layer’s information to the GPU, which then composes the layers and displays them on the screen