preface

Not so long ago, it was enough for a frontiersman to get a job simply by knowing the three frontiersmen. A lot of front-end is limited to CSS, HTML, JS, network foundation, data structure and so on are not very understanding. However, the front-end of this era was also the most despised, as much of the work on the front end depended on the back end and did not require animation or interaction effects.

Nowadays, the front-end circle has undergone tremendous changes. Vue, React, ES6, HTML5, CSS3, Webpack, PostCss and other technologies emerge one after another. As a pattern of the front end, the network foundation is to be clear in mind.

If you are not familiar with the basics of the Internet, the following content can give you an idea; If you already know this, please criticize the following.

Into the topic

Everything is born to serve a few people. Gradually promoted by this very few people, we began to contact the public to understand it, the Internet is so, mahjong is so. Whether it’s the Internet or mahjong, they enhance communication between people. I’m going to talk about the following:

  1. Five layer Internet protocol stack
  2. Differences between HTTP and HTTPS
  3. TCP/IP protocol
  4. Three handshakes and four waves
  5. DNS Domain name Resolution
  6. Five types of IP addresses
  7. Cross-domain causes and solutions
  8. Forward and reverse proxies
  9. CDN brings performance optimization
  10. HTTP strong cache & negotiated cache

I’ll talk about 1-5 in this one, and 6-10 in the next one.

TOP 5 Layer Internet protocol stack

The five-tier Internet protocol stack may seem a bit boring to you, but some of your questions will become clear once you get a glimpse of the stack.

1. Application layer

The task of the application-layer is to complete a specific network application through the interaction between application processes. Application layer protocols define the rules for communication and interaction between application processes (processes: running programs in a host). Different application layer protocols are required for different network applications. There are many application layer protocols in the Internet, such as domain name system DNS, HTTP protocol to support world Wide Web applications, SMTP protocol to support E-mail and so on.

The data units that the application layer interacts with are called packets

The domain name system

Domain Name System (Domain Name System) is a core service of the Internet. As a distributed database that can map Domain names and IP addresses to each other, it can make people access the Internet more conveniently without remembering the IP number strings that can be read directly by the machine.

The HTTP protocol

HyperText Transfer Protocol (HyperText Transfer Protocol) is the most widely used network Protocol on the Internet. All WWW (World Wide Web) files must comply with this standard.

Second, the transmission layer

The main task of the Transport layer is to provide a common data transfer service for communication between two host processes. Application processes use the service to transmit application-layer packets.

Two protocols commonly used at the transport layer

  1. Transmission control Protocol -TCP: provides connection-oriented, reliable data transfer services.
  2. User data protocol-UDP: provides a connectionless, best-effort data transfer service (without guaranteeing the reliability of data transfer).

TCP (Transmisson Control Protocol)

  1. TCP is connection-oriented (a connection needs to be established first);
  2. Each TCP connection can have only two endpoints, and each TCP connection can be one-to-one.
  3. TCP provides reliably delivered services. Data transmitted through TCP connection, error-free, not lost, not repeated, and arrive in sequence;
  4. TCP provides full duplex communication. TCP allows applications on both sides of the communication to send data at any time. Both ends of the TCP connection are configured with the send cache and receive cache to temporarily store the data exchanged between the two parties.
  5. Byte – oriented stream. A “Stream” in TCP refers to a sequence of bytes flowing into or out of a process.

User Datagram Protocol (UDP)

  1. UDP is connectionless;
  2. UDP is best effort delivery, that is, reliable delivery is not guaranteed, so hosts do not need to maintain complex link states;
  3. UDP is message-oriented.
  4. UDP does not have congestion control, so network congestion does not reduce the sending rate of the source host (useful for real-time applications, such as live broadcasting and real-time video conferences).
  5. UDP supports one-to-one, one-to-many, many-to-one, and many-to-many interactive communication.
  6. The header of UDP has a small overhead of only 8 bytes, which is shorter than TCP’s 20 bytes header.
  1. Simplex data transmission supports data transmission in only one direction
  2. Half duplex data transmission allows data to be transmitted in two directions. However, at a certain time, data is only allowed to be transmitted in one direction. It is actually a kind of directional switching simplex communication.
  3. Full-duplex data communication allows data to be transmitted in two directions at the same time. Therefore, full-duplex communication is the combination of two simplex communication modes, which requires both the sending device and the receiving device to have independent receiving and sending capabilities.

Third, network layer

The task of the network layer is to select the appropriate network routing and switching nodes to ensure the timely transmission of computer communication data. When sending data, the network layer encapsulates the packet segments or user datagrams generated by the transport layer into packets and packets for transmission. In the TCP/IP architecture, packets are also called IP datagrams, or datagrams for short, because the network layer uses the IP protocol.

The Internet is composed of a large number of heterogeneous networks connected with each other through routers. The network layer protocol used by the Internet is the Connectionless Internet Protocol (Intert Prococol) and many routing protocols, so the network layer of the Internet is also called the Internet layer or IP layer.

4. Data link layer

The Data Link Layer is often referred to as the link layer for short. Data transmission between two hosts is always transmitted over a segment of the link, which requires the use of a special link-layer protocol. When transmitting data between two adjacent nodes, the data link layer assembles the following IP datagrams of the network layer into frames and transmits the frames over the link between the two adjacent nodes. Each frame contains data and necessary control information (such as synchronization information, address information, error control, etc.).

When receiving data, control information enables the receiver to know which bits a frame begins and ends in.

5. Physical layer

The units of data transmitted at the physical layer are bits. The role of the physical layer is to realize the transparent transmission of bitstreams between adjacent computer nodes, shielding the differences between specific transmission media and physical devices as much as possible. The data link layer above it does not have to consider what the specific transmission medium of the network is. “Transparently transmitted bitstream” means that the bitstream transmitted by the actual circuit does not change, and the circuit appears to be invisible to the transmitted bitstream. Among the various protocols used on the Internet, the most important and the most famous are TCP/IP.

OSI seven – layer protocol model, TCP/IP four – layer model

  1. The OSI 7-layer protocol model is as follows: Application layer, Presentation layer, Session layer, Transport layer, Network layer, Data Link layer and Physical layer.

  2. TCP/IP Four-layer model TCP/IP is a four-layer architecture, including the application layer, transport layer, network layer, and link layer.

Each layer corresponds to

The following diagram nicely illustrates the differences between the three protocols

The difference between HTTP and HTTPS TOP

The difference between HTTP HTTPS
agreement Running on TOP of TCP, clear text transmission,Neither the client nor the server can verify the identity of the other HTTP, with its Secure Socket Layer shell, runs on TOP of SSL, which runs on top of TCP.Is HTTP with encryption and authentication added.
port 80 443
Resource consumption less Due to encryption and decryption processing, more CPU and memory resources will be consumed
overhead Without the certificate Certificates are required, and certificates are generally purchased from certification bodies
Encryption mechanism There is no A hybrid encryption mechanism combining shared key encryption and public key encryption
security weak Strong security due to encryption mechanism

Symmetric and asymmetric encryption

Symmetric key encryption means that encryption and decryption use the same key. The biggest problem in this method is key sending, that is, how to securely send the key to the other party. Asymmetric encryption refers to the use of a pair of asymmetric keys, namely a public key and a private key. The public key can be distributed freely, but the private key is known only to itself. The party that sends the ciphertext uses the other party’s public key for encryption. After receiving the encrypted information, the other party uses its own private key to decrypt the encrypted information. Asymmetric encryption can ensure security because it does not need to send the private key for decryption. But it’s very slow compared to symmetric encryption.

To sum up: we still use symmetric encryption to send messages, but the keys used in symmetric encryption can be sent using asymmetric encryption.

HTTP2

HTTP2 can improve the performance of web pages.

In HTTP1, the browser limits the number of requests for the same domain (typically six in Chrome). When requesting many resources, the browser waits until the maximum number of requests has been completed.

HTTP2 introduces multiplexing, which allows all requested data to be transmitted over a single TCP connection. Multiplexing improves web page performance by bypassing the problem of browsers limiting the number of requests under the same domain name.

TCP/IP protocol TOP

The IP protocol responsible for transport

At the network layer, the Internet Protocol (IP) transmits various data packets to each other. To ensure that the device is sent to the other party, various conditions must be met. Two important conditions are IP Address and MAC Address.

IP address and MAC Address: specifies the IP address assigned to the node. The MAC address is the fixed address of the nic. The IP address can be paired with the MAC address. The IP address can be changed, but the MAC address is basically unchanged.

The ARP protocol is used to communicate by MAC address

  1. The communication between IP addresses depends on MAC addresses.
  2. ARP is a protocol used to interpret addresses. The MAC address of the corresponding party can be traced based on the IP address of the corresponding party.

How does TCP maintain transmission reliability

TCP provides a connection-oriented, reliable byte stream service. 1. Connection-oriented means that two applications using TCP (typically a client and a server) must establish a TCP connection before exchanging data with each other. In a TCP connection, only two parties communicate with each other. 2. Byte stream service means that two applications exchange a byte stream consisting of 8bit bytes over a TCP connection. TCP does not insert record identifiers into the byte stream.

TCP is reliable for the following reasons:

  1. Packet verification: The purpose is to detect any changes in the data transmission process. If an error is detected, the packet segment is discarded and no response is given. In this case, the TCP sending end will resend data after timeout.
  2. Reordering of out-of-order packets: Since TCP packet segments are transmitted as IP datagrams, and IP datagrams may arrive out of order, TCP packet segments may also arrive out of order. TCP will reorder the out-of-order data before handing it to the application layer.
  3. Discard duplicate data: Duplicate data can be discarded.
  4. Acknowledgement mechanism: When TCP receives data from the other end of the TCP connection, it sends an acknowledgement. This confirmation is not sent immediately and is usually delayed by a fraction of a second;
  5. Timeout retransmission: When TCP sends a segment, it starts a timer and waits for the destination to acknowledge receipt of the segment. If an acknowledgement cannot be received in time, the packet segment is resend.
  6. Flow control: Each side of the TCP connection has a fixed amount of buffer space. The TCP receiver only allows the other end to send as much data as the buffer on the receiving end can accept. This prevents the fast host from overrunning the buffer on the slow host. This is flow control.

TCP/IP traffic

Borrowed from the illustrated HTTP book:

TCP three handshakes and four waves TOP

Transmission Control Protocol (TCP) is a connection-oriented, reliable, byte stream based transport layer communication Protocol defined in RFC793 of the IETF.

Three-way handshake

First handshake:






Second handshake:






Third handshake:


After completing the three-way handshake, the client and server begin transferring data.

Note: seq: serial number of “Sequance”; Ack :”acknowledge”; SYN:”synchronize” Indicates a request for synchronization. 2. ACK:”acknowledge” FIN:”Finally” Indicates the end flag.

Unconnected queue In the three-way handshake protocol, the server maintains an unconnected queue that opens an entry for each client’s SYN packet (SYN =j), which indicates that the server has received a SYN packet, has sent an acknowledgement to the client, and is waiting for the acknowledgement packet from the client. The connection identified by these entries is in the SYN_RECV state on the server. When the server receives a confirmation packet from the client, the entry is deleted and the server enters the ESTABLISHED state.

Three handshakes are required to establish a connection, and four waves are required to terminate a connection, caused by TCP’s half-close.

Four times to wave

First wave:


Second wave: After receiving the connection release packet, the server sends an acknowledgement packet with ACK = 1, ACK = u + 1 and its serial number seq = V. At this time, the server enters close-wait state.

The TCP server notifies the higher-level application process that the client is released from the direction of the server. This state is half-closed, that is, the client has no data to send, but if the server sends data, the client still accepts it. This state also lasts for a period of time, i.e. the duration of the close-wait state. After receiving the acknowledgement request from the server, the client enters the fin-WaIT-2 state and waits for the server to send a connection release packet (before receiving the final data from the server).

Third wave: After sending the final data, the server sends a connection release packet to the client, FIN = 1, ACK = U + 1. Since the server is in the half-closed state, it is likely to send more data. Assume that the serial number is SEq = W, and the server enters the last-ACK state. Wait for confirmation from the client.

Fourth wave: After receiving the connection release packet from the server, the client sends ACK = 1, ACK = w + 1 and its serial number is SEq = U + 1. In this case, the client enters the time-wait state.

Note that the TCP connection is not released at this time, and the client enters the CLOSED state only after the client revokes the corresponding TCB after 2MSL (maximum packet segment life).

The server enters the CLOSED state immediately after receiving an acknowledgement from the client. Similarly, revoking the TCB terminates the TCP connection.

As you can see, the server ends the TCP connection earlier than the client.

Four times

This is because when a server SOCKET in LISTEN receives a SYN request, it can send ACK and SYN in one packet. ACK responds and SYN synchronizes. When you close a connection and receive a FIN packet notification from the peer party, it only indicates that the peer party has no data to send you. You may not close the SOCKET immediately because all of your data has been sent to the peer. In other words, you may need to send some data to the peer and then send a FIN packet to the peer to indicate that you agree to close the connection. Therefore, ACK and FIN packets are sent separately in most cases.

Because the TCP connection is full-duplex, each direction must be closed separately. The principle is that a party can send a FIN to terminate the connection in that direction when it has finished sending its data. Receiving a FIN only means that there is no data flow in that direction, and a TCP connection can still send data after receiving a FIN. The party that closes first performs an active shutdown and the other party performs a passive shutdown.

DNS Domain name resolution TOP

You must have a general idea of what happens when you type https://juejin.cn into the browser address bar. Here I will go through the steps of DNS domain name resolution in detail. I want to show you a classic picture for a minute before I talk about the concept.

The process of finding the IP address corresponding to a domain name

  1. The browser searches its DNS cache (the browser maintains a map of domain names and IP addresses); If no, go to the next step.
  2. Search DNS cache in operating system; If no, go to the next step.
  3. Search for the hosts file of the operating system (in Windows, maintain a mapping table between domain names and IP addresses). If no, go to the next step.
  1. The operating system sends the domain name to the LDNS (local zone name server), which queries its DNS cache (the hit ratio is about 80%). If the search succeeds, the LDNS returns the result. If the search fails, it initiates an iterative DNS resolution request:
  2. LDNS sends a request to the Root Name Server (address of the Root DNS Server, such as COM, NET, and IM TOP-LEVEL DNS Server). In this case, the Root Name Server returns the ADDRESS of the TOP-LEVEL DNS Server in the IM domain.
  3. The LDNS sends a request to the TOP-LEVEL domain name server of the IM domain and returns the juejin.
  4. LDNS sends a request to the juejin. Im domain name server and obtains the IP address of Juejin.
  5. LDNS returns the obtained IP address to the operating system and caches the IP address itself. The operating system returns the IP address to the browser and caches the IP address itself.

DNS Prefetch

DNS prefetch is part of front-end optimization. In general, there are two things related to DNS in front-end optimization:

  1. Reduce the number of DNS requests
  2. Perform DNS pre-obtaining

A typical DNS resolution takes 20-120 milliseconds, so reducing the time and frequency of DNS resolution is a good optimization. DNS Prefetching reduces waiting time and improves user experience as domain name resolution and loading is a serial network operation.

TOP five types of IP addresses

See next article

Cross-domain causes and handling methods TOP

See next article

Forward proxy and reverse proxy TOP

See next article

CDN brings TOP performance optimization

See next article

HTTP Strong Cache & Negotiated Cache TOP

See next article

If you finished reading, still not satisfied with the words; I recommend that you read my two articles on inheritance, which will give you a new understanding. – Can you do everything the interviewer asks you? Inheritance (2) — Return (8

reference

  1. Illustrated HTTP
  2. Fundamentals of Computer Networks
  3. Blog.csdn.net/qzcsu/artic…
  4. Segmentfault.com/a/119000001…
  5. Developer.mozilla.org/zh-CN/docs/…

Front-end dictionary series

The Front End Dictionary series will continue to be updated, and in each issue I will cover a topic that comes up frequently. I would appreciate it if you could correct any inpreciseness or mistakes in the reading process. I will be delighted if I learn something from this series.

If you think my article is good, you can follow my wechat public account, which will reveal the plot in advance.

You can also add my wechat WQHHSD, welcome to exchange.

Next up

Advanced Network Basics (part 2)

portal

  1. Talk to your daughter-in-law about the unexpected harvest of acting
  2. Solution to the rolling penetration problem
  3. Inheritance (1) – Prototype chain Do you really understand?
  4. Inheritance (2) — Return (8
  5. Advanced Network Basics (part 2)