What happens when the user enters the URL and displays the page

  • The browser verifies the URL format
  • The browser’s web process looks for the resource in the cache, returns it if it exists, and initiates a URL request if it does not
  • If the protocol is HTTPS, you need to establish a TLS connection
  • TCP connection: Establishes the connection through TCP three-way handshake using the IP address of the target server
  • Construct HTTP request packets and send HTTP requests
  • The server processes the request and returns a response message
  • When the TCP connection is disconnected, the data transfer is complete. Normally, TCP disconnects the connection with four waves. But if the browser or server adds Connection: keep-alive to the HTTP header, TCP will remain connected.
  • After receiving the response packet, the network process of the browser parses it. If the status code is 301 or 302, the network process obtains the address corresponding to the Location in the response header and redirects the request
  • Rendering the page, the browser first parse HTML to generate a DOM tree, parse CSS to generate a CSSOM tree, and then DOM tree and CSSOM tree are synthesized to generate a rendering tree, through the rendering tree layout and calculation of each node information, rendering the page

UDP

For a message

  • UDP is a protocol for packets, which can be interpreted as pieces of data. UDP is a porter of packets and does not split or splice packets.

Unreliability.

  • UDP is connectionless, which means that communication does not need to be established and disconnected.
  • UDP is also unreliable. The protocol transmits whatever data it receives and does not back up the data. Does it care whether the other party receives it or not
  • UDP has no congestion control and will always send data at a constant speed. Even if the network condition is not good, the sending rate will not be adjusted. The disadvantage of this implementation is that it may lead to packet loss in the case of poor network conditions, but the advantage is also obvious. In some real-time demanding scenarios (such as teleconference), UDP is used instead of TCP.

efficient

Because UDP is not as complex as TCP, it is necessary to ensure that data is not lost and arrives in an orderly manner. So UDP header overhead is small, only eight bytes, compared to TCP at least 20 bytes is much less, in the transmission of data packets is very efficient.

transport

UDP not only supports one-to-one transmission, but also one-to-many, many-to-many, and many-to-one transmission modes. That is, UDP provides unicast, multicast, and broadcast functions.

TCP

TCP three-way handshake

  • First handshake: The client sends a packet with the SYN (connection request) flag to the server
  • Second handshake: The server sends a packet with the SYN/ACK flag to the client
  • Third handshake: The client sends a packet with an ACK flag to the server

TCP waved four times

  • The client sends a FIN (disconnect request) to shut down the transfer of data from the client to the server
  • The server receives the FIN, and it sends back an ACK
  • The server closes the connection with the client and sends a FIN to the client
  • The client sends an ACK packet to confirm the delay and enters the time-wait state. The state lasts for 2MSL (maximum segment lifetime, which refers to the period in which a packet segment exists on the network. The timeout will be discarded). If no resending request is received from the server within this period, the server enters the CLOSED state. When the server receives an acknowledgement, it goes to the CLOSED state.

Why does the client enter the time-wait state and WAIT 2MSL before entering the CLOSED state?

To ensure that the server receives an acknowledgement from the client. If the client enters the CLOSED state directly after sending the acknowledgement reply, the server cannot be shut down properly if the acknowledgement reply does not arrive due to a network problem.

TCP/IP four layer network model

The TCP/IP model is an umbrella term for a series of network protocols designed to enable information exchange between computers

From top to bottom

  • Application layer: responsible for transmitting various final forms of data, is directly dealing with user information layer, the main protocol is HTTP protocol
  • Transport layer: responsible for the transmission of text data, the main protocol is TCP protocol
  • Network layer: responsible for assigning addresses and transmitting binary data. The main protocol is IP
  • Link layer: responsible for establishing circuit connections, is the physical foundation of the entire network, typical Ethernet protocol

​

The TCP/IP model is an umbrella term for a series of network protocols designed to enable information exchange between computers

From top to bottom

  • Application layer: responsible for transmitting various final forms of data, is directly dealing with user information layer, the main protocol is HTTP protocol
  • Transport layer: responsible for the transmission of text data, the main protocol is TCP protocol
  • Network layer: responsible for assigning addresses and transmitting binary data. The main protocol is IP
  • Link layer: responsible for establishing circuit connections, is the physical foundation of the entire network, typical Ethernet protocol

​

OSI seven layer model

From top to bottom

  • Application layer: file transfer, common protocol HTTP
  • Presentation layer: data formatting, code conversion, data encryption
  • Session layer: establishes and dissolves sessions
  • Transport layer: provides end-to-end interfaces, TCP and UDP
  • Network layer: Selects routing, IP, for packets
  • Data link layer: transmits addressed frames
  • Physical layer: Binary data is transmitted over physical media

​

Flow control

In a TCP connection, for both the sender and the receiver, TCP needs to put the sent data into the send cache and the received data into the receive cache. And there is often a sender sent too much, and the receiver can not digest the situation, so the need for flow control, that is, through the size of the receiving cache, control the sender to send. If the receiver’s receive cache is full, the receiver cannot continue sending. The process of flow control requires the maintenance of a sending window at the sender and a receiving window at the receiver.

Congestion control

The reason is that the entire network environment may be particularly bad, easy to lose packets, then the sender should pay attention to. There are three main methods:

  • Slow start threshold + Congestion avoidance
  • The fast retransmission
  • The quick reply

​

Slow start threshold + Congestion avoidance

For congestion control, TCP maintains two core states: Congestion window (CWND) Slow start Threshold (SSthRESH) Congestion Windows are used at the sending end to control the size of the send window. And adopt a more conservative to adapting to the network slow start algorithm, at the start of transmission for a period of time, the sender and the receiver will first through the three-way handshake to establish a connection, determine the respective receiving window size, and then initializes the congestion window, then each after a RTT (sending and receiving time delay), double the congestion window size, until you reach the slow start threshold. And then we start to do congestion avoidance, and the way we do congestion avoidance is we double the congestion window for each round of RTT, and now we add one for each round.

The fast retransmission

In the process of TCP transmission, if packet loss occurs, the receiver will send repeated ACK, for example, the fifth packet lost, 6, 7 reached, and then the receiver will send ACK for the fourth packet for 5, 6, 7. At this time, the sender received three repeated ACK, and realized that the packet lost, it will immediately retransmit. Instead of waiting for RTO (timeout retransmission time) selective retransmission: The SACK attribute is added to the optional header of the packet, and the left edge and right Edge mark the packets that have arrived, and then retransmit the packets that have not arrived

Fast recovery

If the sender has received three repetitive ACK, found the lost package, think now network condition has entered into a state of congestion, then, would be the quick recovery phase: congestion will be reduced to half of the congestion window threshold Then the congestion window size into congestion threshold Then carries on the linear increase congestion window again, to adapt to the network status

Differences between TCP and UDP

TCP is a connection-oriented, reliable, byte stream – based transport layer protocol. UDP is a connectionless transport layer protocol. (As simple as that, other TCP features are gone). Specifically, compared with UDP, TCP has three core features:

  1. connection-oriented. The so-called connection refers to the connection between the client and the server. TCP requires three handshakes to establish the connection before the two sides communicate with each other, while UDP does not have the corresponding connection establishment process.
  2. reliability. TCP puts a lot of effort into ensuring that the connection is reliable. In what ways is this reliability reflected? One is stateful, the other is controllable. TCP keeps a precise record of what data is sent, received and not received, and ensures that packets arrive in sequence, with no margin of error. This is stateful. When a packet is lost or the network environment is poor, TCP adjusts its behavior to control the sending speed or resending. It’s manageable. Accordingly, UDP is stateless and uncontrollable.
  3. Word oriented stream. UDP data transmission is based on datagrams because it inherits only IP layer features, whereas TCP maintains state by turning IP packets into byte streams.

HTTP

What is the HTTP protocol

HTTP (Hypertext Transfer Protocol) is a stateless protocol that does not store state. It is based on TCP

HTTP transport stream

  • The sender initiates an HTTP request at the application layer (HTTP protocol)
  • The transport layer (TCP) then divides the data (HTTP request packets) received from the application layer and marks each packetMark the serial numberandThe port numberThen forward to the network layer
  • Add the MAC address as the communication destination at the network layer (IP protocol) and forward the MAC address to the link layer
  • The server at the receiving end receives data at the link layer and sends the data to the upper layer in sequence, all the way to the application layer

HTTP caching mechanism

HTTP cache is the first time that a browser makes an HTTP request to a server, the server returns the requested resource and adds some cached fields to the response header. Cache-control, Expires, Last-modifed, ETag, Date, etc. The browser then requests resources from the server and can use strong caching and negotiated caching as appropriate

Strong cache

The browser fetches data directly from the local cache and does not interact with the server

Cache-control verifies that the strong Cache is available

  • No-store: cache is not allowed (for scenarios with very high frequency of change, such as seckill pages)
  • No-cache: it can be cached. Before using it, the server must check whether it is expired and the latest version
  • Must-revalidate: If the cache does not expire, it can continue to be used. If the cache expires, it must be verified by the server

Negotiate the cache

The browser sends the request to the server, which determines whether the local cache is available

The server checks whether the resource is up to date by checking whether the request header contains if-modified-since and if-none-match conditional request fields

  • If the resource is updated, return the resource and 200 status code
  • If the resource is not updated, tell the browser to fetch the resource directly using the cache

Statelessness of HTTP

The statelessness of HTTP protocol means that the protocol layer of the server does not need to establish any correlation between different requests. It specifically refers to the statelessness of the protocol layer. But this does not mean that applications built on top of HTTP cannot maintain state. The application layer can track the correlation between user requests through Session. The server will bind a unique Session ID to each Session object. The browser can record the Session ID in the local cache LocalStorage or Cookie, and carry this Session ID in subsequent requests. The server can then find the corresponding session for each request

Copy the code

Common status codes

2 xx success

200 OK: indicates that the request from the client is processed correctly on the server

3 xx redirection

301 Permanent redirection: a resource has been assigned a new URL. 302 Temporary redirection: a resource has been assigned a new URL temporarily

4XX Client error

404 Indicates that the requested resource is not found on the server

5XX Server error

500 indicates that an error occurred on the server side while executing the request

HTTPS

HTTPS is the SSL/TLS protocol between HTTP and TCP.

Combined with the respective advantages of asymmetric encryption and symmetric encryption, with the certificate. It ensures both security and transmission efficiency.

At present, TLS1.2 is the most widely used, and the implementation principle is as follows:

  1. Client sends Random1 + symmetric ciphersuite list + asymmetric ciphersuite list
  2. The Server receives the message, selects the symmetric encryption suite + asymmetric encryption suite and returns with random2+ certificate (the public key is in the certificate)
  3. The Client verifies the validity of the certificate and uses Random1 + Random2 to generate a pre-master and send it to the Server via the Server’s public key encryption + browser confirmation
  4. The Server receives the pre-master, according to the agreed encryption algorithm random1+ Random2 +pre-master (decryption) to generate master-secret, and then send the Server for confirmation
  5. The Client receives the same master-secert and transfers the symmetric encryption key

TLS1.3 simplifies the handshake process and requires only one message to complete the handshake, improving performance. Not only that, but also some of the insecure encryption algorithms were cut.

websocket

WebSocket is long polling

For example, in an electric shopping mall, the inventory of goods may change, so it needs to be reflected to the user in a timely manner, so the client will keep sending requests, and then the server will keep checking the changes, regardless of the change, return, this is short polling. However, long polling does not return if there is no change, but returns only after the change or timeout (usually more than ten seconds). If there is no return, the client does not need to send requests all the time, thus reducing the pressure on both sides.

Let you thoroughly understand the Websocket principle

WebSocket it’s time to show your best side

Cross domain

  • JSONP, or JSON with Padding, solves the problem of cross-domain data access in older browsers. The principle is that a Web page can invoke JS files without being restricted by the same origin policy of the browser, so cross-domain requests can be made through script tags

  • Cors, which stands for Cross-domain resource Sharing, allows browsers to issue XMLHTTP Requests to cross-source servers, which overcomes the policy that Ajax can only be used in the same source. The key to implementing CORS is the server, which can communicate across domains as long as the server implements the CROS interface

  • Server agent

Web security

Front-end Security Series 1: How do I Prevent XSS attacks?

Front-end Security Series 2: How do I Prevent CSRF Attacks?

Cookie, Session, Token, JWT

Cookie, Session, Token, JWT

Refer to the article

What are the technical steps behind entering a URL in the browser address bar and pressing Enter?

Little brother, little sister, I have a TCP, HTTP interview guide do you want?

Follow the animation to learn the TCP three-way handshake and four-way wave

Bytedance’s favorite front end exam: Fundamentals of computer networks

HTTP questions from the years of “front-end canteen” with interviewers

The interview is the master TCP

The soul of TCP, solidify your network infrastructure

The way to advance the front end