Complete high-frequency question bank warehouse address: github.com/hzfe/awesom…

The full frequency question bank reading address: febook.hzfe.org/

Answer key points

URL DNS TCP rendering

Browser from the input url to render the page is mainly divided into the following several processes

  • Your URL

  • The DNS

  • Establishing a TCP Connection

  • Sending an HTTP/HTTPS request (establishing a TLS connection)

  • The server responds to requests

  • The browser parses the rendered page

  • Description The HTTP request ends, and the TCP connection is disconnected

Knowledge depth

1. Your URL

The URL address

Uniform Resource Locator (URL) is used to locate resources on the Internet.

We enter HZFE official website hzfe.org in the address bar and press Enter. The browser will make the following judgment on the input information:

  1. Check that the input is a valid URL link.

  2. If yes, check whether the entered URL is complete. If incomplete, the browser may guess the field and complete the prefix or suffix.

  3. If no, use the default search engine as the search criteria.

Most browsers will start with history, bookmarks, etc., to find the url we type in, and give intelligent hints.

2. DNS resolution

The browser cannot directly find the corresponding server IP address based on the domain name. Therefore, you need to perform DNS resolution to find the corresponding IP address for access.

The DNS resolution process is as follows:

  1. Enter the domain name hzfe.org in the address box of the browser. The OPERATING system checks whether the address is recorded in the browser cache and the local hosts file. If yes, locate the CORRESPONDING IP address in the records and resolve the domain name.

  2. Check whether there is a record of this URL in the local DNS parser cache. If there is, find the corresponding IP address from the record to complete domain name resolution.

  3. Use the DNS server specified in TCP/IP parameters for query. If the domain name to be queried is included in the resources in the local configuration area, the resolution result is displayed.

  4. Check whether the local DNS server caches the URL record. If yes, the resolution result is returned to complete domain name resolution.

  5. The local DNS server sends a query packet to the root DNS server. After receiving the request, the root DNS server responds with the top-level DNS server address.

  6. The local DNS server sends query packets to the TOP-LEVEL DNS server. After receiving the request, the top-level DNS server responds with the authoritative DNS server address.

  7. The local DNS server sends a query packet to the authoritative DNS server. After receiving the request, the authoritative DNS server responds with the IP address of hzfe.org to complete domain name resolution.

The query usually follows the preceding process. The query from the requesting host to the local DNS server is recursive, and the DNS server obtains the required mapping through iterative query.

3. Establish the TCP connection

Nearly all HTTP traffic in the world is carried by TCP/IP, a common layer of packet-switched networks used by computers and network devices around the world. An HTTP connection is really just a TCP connection and its usage rules. — The Definitive GUIDE to HTTP

After obtaining the IP address of the server, the browser sends a TCP connection request to port 80 of the server using a random port 1024 (port 1024 < port 65535). After the connection request reaches the server, the TCP three-way handshake is used to establish a TCP connection.

3.1 Layered Model

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | application layer 7 | | HTTP 5 | | | | | 6 said layer application layer session layer | | | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | 4 | | | the TCP transport layer TLS transport layer -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | 3 | network layer IP network layer | | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 2 | | the data link layer Link layer 1 | the physical -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- (OSI) | TCP/IPCopy the code

3.2 TCP three-way handshake

In TCP, when the sender sends the first SYN packet to the receiver, the receiver returns an acknowledgement that it has been received. This message is called an acknowledgement ACK assuming client A and server B. We need to establish reliable data transmission. SYN (= j) / / SYN: A request to establish A connection A -- -- -- -- -- -- -- -- -- - > | B ACK (= j + 1) | / / ACK: B confirm reply A SYN SYN (= k) | / / SYN: B sends A SYN < -- -- -- -- -- -- -- -- -- -- - | | ACK (= k + 1) -- -- -- -- -- -- -- -- -- -- - > B / / ACK: A confirmation reply B packageCopy the code

  1. The client sends a SYN packet (seq = J) to the server and enters the SYN_SEND state for confirmation.

  2. After receiving a SYN packet, the server must acknowledge the SYN (ACK = K + 1) from the customer and send a SYN packet (SEq = K). In this case, the server enters the SYN_RECV state.

  3. After receiving the SYN+ACK packet from the server, the client sends an ACK packet (ACK = K + 1) to the server. After the ACK packet is sent, the client and the server enter the ESTABLISHED state and complete the three-way handshake.

4. Negotiate TLS

The TLS negotiations

Once the connection is established, data can be transferred over HTTP. If HTTPS is used, a layer of protocols is added between TCP and HTTP for encryption and authentication. HTTPS uses the Secure Socket Layer (SSL) and Transport Layer Security (TLS) protocols to ensure information Security.

  • SSL

  • Authenticate users and servers to ensure that data is sent to the correct clients and servers.

  • Encrypt data to prevent data theft.

  • Maintain data integrity and ensure that data is not changed during transmission.

  • TLS

  • Used to provide confidentiality and data integrity between two communication applications. This protocol consists of two layers: TLS Record and TLS Handshake. The lower layer is the TLS recording protocol, which sits on top of some reliable transport protocol, such as TCP.

4.1 TLS Handshake Protocol

  1. The client sends a Client Hello message containing the following information: list of supported SSL/TLS versions; Supported encryption algorithms; Supported data compression methods; Random number A.

  2. The server responds with a Server Hello message carrying the following information: SSL/TLS version used for negotiation; The session ID. Random number B; Server digital certificate serverCA; Due to the requirement of bidirectional authentication, the server needs to authenticate the client and sends a client Certificate Request to request the client certificate.

  3. The client verifies the digital certificate of the server. After the verification passes, a random number C is sent. The random number is called pre-master-key and is encrypted with the public key in the digital certificate. Because the server initiates a Client Certificate request, the client encrypts a random number clientRandom with the private key and sends the client certificate clientCA.

  4. The server verifies the certificate of the client and decrypts clientRandom, a random number encrypted by the client. A dynamic master-key is generated based on the random number A/ B/ pre-master-key (C), and A Finish message is encrypted and sent to the client.

  5. The client generates a master-key using the same random number and algorithm, encrypts a Finish message and sends it to the server.

  6. The server and client are decrypted successfully, and the handshake is complete. The subsequent data packets are encrypted and transmitted by master-key.

5. The server responds

When the connection from the browser to the Web server is established, the browser sends an initial HTTP GET request, usually to an HTML file. After receiving the request, the server sends back an HTTP response packet containing the response header and HTML body.

< HTML > <head> <meta charset="UTF-8"/> <title> <link rel="stylesheet" SRC ="styles.css"/> <scrIPt SRC ="index.js"></scrIPt> </head> <body> <h1 class="heading"> home </h1> <p>A paragraph with A < A href="https://hzfe.org/">link</a></p> <scrIPt src="index.js"></scrIPt> </body> </html>Copy the code

5.1 status code

The status code is composed of three digits. The first digit defines the category of the response and has five possible values

  • 1XX: Indicating message – indicating that the request has been received and processing continues

  • 2xx: Success: The request is successfully received, understood, or accepted

  • 3xx: Redirect – Further action must be taken to complete the request

  • 4XX: Client error – The request has a syntax error or the request cannot be implemented

  • 5xx: Server side error — the server failed to fulfill a valid request

5.2 Common Request Headers and Fields

  • Cache-control: must-revalidate, no-cache, private

  • Connection: keep-alive

  • Content-encoding: gzip (Returned Content Encoding supported by the Web server)

  • The content-type: text/HTML. Charset =UTF-8 (file type and character encoding format)

  • Date: Sun, 21 Sep 2021 06:18:21 GMT

  • Transfer-encoding: chunked (the server sends resources in chunks)

5.3 HTTP Response Packets

The response message consists of four parts (response line + response header + blank line + response body)

  • Status line: HTTP version + space + Status code + Space + Status code description + Carriage return (CR) + Line feed (LF)

  • Response header: field name + colon + value + carriage return + newline

  • Empty line: carriage return + line feed

  • Response body: user-defined additions, such as the body of a POST

6. The browser parses and draws

Different browser engines have different rendering processes. Here, take Chrome as an example.

  1. Process HTML tags and build DOM trees.

  2. Process CSS tags and build CSSOM trees.

  3. Merge DOM and CSSOM into a render tree.

  4. Layout according to render tree to calculate geometric information for each node.

  5. Draw the individual nodes to the screen.

7. The TCP connection is disconnected

Keep-alive is enabled by default to optimize request time, so the exact time a TCP connection is closed is when the TAB TAB is closed. The closing process is four waves of the hand. Closing is a full-duplex process, and the order of sending packets is not determined. Generally speaking, the shutdown is initiated by the client, as shown in the following figure:

  1. The active closing party sends a FIN to close the data transmission from the active party to the passive closing party, that is, the active closing party tells the passive closing party: I will not send you any more data (if the data sent before the FIN packet is received, the active closing party will resend the data), but the active closing party can still accept the data at this time.

  2. After receiving the FIN packet, the passive close party sends an ACK with the received SEQUENCE number +1 (the same as SYN, one FIN occupies one SEQUENCE number).

  3. The passive closing party sends a FIN to close the data transfer from the passive closing party to the active closing party, which tells the active closing party that MY data has also been sent and I will not send you any more data.

  4. After the active closing party receives the FIN, it sends an ACK to the passive closing party and confirms that the serial number is +1. Thus, four waves are completed.

The resources

  1. How_browsers_work
  2. DOMTokenList
  3. Diagram of SSL/TLS protocol
  4. DNS Domain name System