Writing in the front

Computer network knowledge is a necessary foundation for every programmer, and any message file transmission is related to the network. This paper introduces the basic knowledge of computer network that should be mastered as a front-end

What to eat: Primary front-end

Delicious index: 😋😋😋😋😋

1. What about HTTP status codes? ⭐ ⭐ ⭐ ⭐ ⭐

Status code classification:

  • 1XX The server receives a request
  • 2xx Request succeeded
  • 3 xx redirection
  • 4XX Client error
  • 5XX Server error

Common status codes:

  • 200 success
  • 301 Permanent redirection (with location, the browser handles it automatically)
  • 302 Temporary Redirection (with Location, handled automatically by the browser)
  • 304 Resource not modified (request server, server tells this resource is still valid locally, no need to request)
  • 403 Forbidden: Access to the server is Forbidden for many reasons, such as Forbidden by law, sensitive information, and no permission.
  • 404 Resource not found
  • 405: The request method is not allowed by the server.
  • 500: Just tell the server that there is an error
  • 501: Indicates that the function requested by the client is not yet supported.
  • 502: The server itself is fine, but an error occurred while accessing it
  • 503: Indicates that the server is busy and cannot respond to services temporarily.

2. What do you know about HTTP headers? ⭐ ⭐ ⭐

Common Request Headers:

  • Accept Specifies the format of the data accepted by the browser
  • Accept-encoding Indicates the accept-encoding algorithm, such as gzip
  • Accept-language Indicates the accepted language, such as zh-CN
  • Connection: keep-alive A TCP Connection is used repeatedly
  • Cookie Local information
  • Host Domain of the accessed server
  • User-agent (UA for short) Browser information
  • Content-type Specifies the format of the data to be sent, such as application/ JSON

The Response Headers:

  • Content-type Specifies the format of the returned data, such as Application/JSON
  • Content-length Specifies the size of the returned data in bytes
  • Content-encoding Specifies the compression algorithm for the returned data, such as gzip
  • Set-cookie the server can use this to change the cookie

3. Can you talk about browser caching? ⭐ ⭐ ⭐ ⭐ ⭐

Strong cache:

The first is to check for strong caching, where no HTTP request needs to be sent. There are two fields, Expires and cache-Control

Expires

Expires is a response header returned by the server that tells the browser to retrieve data directly from the cache before the expiration date, without having to request it again. Disadvantages: the server time and browser time may not be consistent, so the expiration date returned by the server may be inaccurate. So this field was later discarded

Cache-Control

This field also exists in a way that differs from Expires in that it doesn’t use a specific expiration date. Instead, it uses an expiration date to control the cache

The value of the cache-control:

  • Max-age: sets the maximum expiration time of the s-level cache
  • No-cache: no mandatory cache is assigned to the server
  • No-store: no mandatory cache or server cache is required
  • Private: Only end users are allowed to cache
  • Public: allows intermediate proxies, routes, and so on to be cached

When both Expires and cache-control are present, cache-control takes precedence.

Negotiation cache:

After strong cache invalidation, the browser sends a request to the server with the corresponding Last-Modified or ETag in the request header. The server decides whether to use the cache based on this value. This is called negotiated cache.

Last-Modified

Last Modified time

  • After the browser first sends a request to the server, the server adds this field to the response header.
  • The browser receives it and carries it in the request header if it requests it againIf-Modified-SinceThe value of this field is also the last modification time sent by the server.
  • The server gets the request headerIf-Modified-SinceAfter the field actually will and this serverWhen the resource was last modifiedContrast:
  1. If the value in the request header is less than the last modification time, it is time to update. Return the new resource, just like the normal HTTP request response flow.
  2. Otherwise, 304 is returned, telling the browser to use cache directly.

ETag

ETag is a unique identifier generated by the server based on the contents of the current file. This value changes whenever the contents of the file are changed.

  • Server passResponse headersGive this value to the browser.
  • The browser receivesETagWill be used as the next requestIf-None-MatchThe contents of this field are placed in the request header and sent to the server.
  • If the server receives if-none-match, it compares it with the ETag of the resource on the server:
  1. If they are different, it’s time for an update. Return the new resource, just like the normal HTTP request response flow.
  2. Otherwise, 304 is returned, telling the browser to use cache directly.

4. This section describes the relationship between the refresh operation and cache ⭐⭐

Three refresh operations:

  • Normal refresh: address bar input URL, jump link, forward and backward
  • Manual Refresh: F5, click refresh button, right click menu refresh
  • Force refresh: CTRL + F5

Different cache policies for different refresh operations:

  • Normal refresh: Force cache to be valid, negotiate cache to be valid
  • Manual refresh: Force cache invalidation and negotiate cache validity
  • Force refresh: Force cache invalidation, negotiation cache invalidation

5. The rendering process from entering the URL to the browser is ⭐⭐⭐⭐⭐

  1. After you press Enter, the browser first parses the domain name and checks the local hosts file to see if there is a rule. If there is, use the IP address in hosts
  2. If the hosts does not have an IP address, the browser sends a DNS request to the local DNS server. If the local DNS server does not have an IP address, the browser returns a DNS request to the root DNS server. The root DNS server returns the address of the domain server. The domain server returns the address of the resolver for the domain name. The local DNS server returns the IP address of the domain name to the browser and stores the IP address in the cache for future access.
  3. After obtaining the IP address, the system sends a TCP request to the corresponding Web server and establishes a TCP connection through a three-way handshake.
  4. Upon receiving the request, the server parses the user’s request, knows which resource file to schedule, processes the user’s request and parameters, calls the database information, and finally returns the result to the server.
  5. Close the TCP connection with four waves of the hand
  6. The browser takes the HTML and starts building the DOM tree, which is a deep traversal.
  7. Get CSS and build CSSOM. Building CSSOM does not need to wait for all DOM to be built. The loading speed of CSS and the speed of building CSSOM will directly affect the first screen rendering speed, so CSS in the head can improve the performance of the page. Build early render early.
  8. Combine DOM with CSSOM to create a Render Tree with style information for each node of the Render Tree.
  9. Layout, find out where all the content is on the page. Layout according to the render tree to calculate geometric information for each node, i.e. exact location and size on the screen, all relative values will be converted to absolute pixels on the screen
  10. Painting. The browser starts painting pixels on the screen. Draw the individual nodes to the screen.

6. How do you build DOM trees and CSSOM? ⭐ ⭐ ⭐

The process of building DOM trees and CSSOM is similar

  1. First parse the file (HTML file, CSS file)
  2. Convert bytes to characters
  3. Identify tokens
  4. Convert tokens into nodes
  5. According to the nodes to build a DOM tree | | CSSOM

PS: build the DOM tree diagram and CSSOM diagram, it is easy to see

7. Say HTTPS? ⭐ ⭐ ⭐ ⭐ ⭐

HTTPS:

Certificate generation process:

  1. The server generates its own private key and public key, and the CA company has its own public key and private key
  2. The server requests a signature authentication from the ca, which signs with its own private key, so that anyone with the ca’s public key knows that it signed the certificate
  3. Most browsers have a list of certification authorities and a public key. Public key authentication tells you that the server is correct (trust the server because you trust the certification authority).

Browser and Server:

  1. The browser accesses a server, which sends the certificate and its public key.
  2. The browser trusts the authentication authority, decrypts the server correctly, creates a random key and encrypts it with the server’s public key
  3. Only the server can decrypt the browser’s random key, so communications are symmetrically encrypted with the random key

8. What are the differences between different versions of HTTP? ⭐ ⭐ ⭐ ⭐

HTTP / 0.9 version:

  • There is only one command, GET, which supports only plain text content
  • After each request, the connection between the server and client is closed.

Http1.0 version:

  • Expanded content transmission format, which makes the Internet not only can transmit text, but also can transmit images, videos, binary and other files.
  • In addition to the GET command, the POST command and HEAD command are also introduced.
  • Long connections are not supported by default. To address this, the browser uses a non-standard Connection field and sets keep-alive.

Http1.1 version:

  • Persistent connections are introduced, that is, TCP connections are not closed by default and can be reused by multiple requests without declaring Connection: keep-alive.
  • The introduction of pipeline mechanism, that is, in the same TCP connection, the client can send multiple requests at the same time, further improving the efficiency of the HTTP protocol.
  • Add methods: PUT, PATCH, OPTIONS, and DELETE.
  • The Host field has been added to the client request header to specify the domain name of the server
  • The HTTP protocol has no state, and all information must be attached to each request. Many of the requested fields are duplicated, wasting bandwidth and affecting speed.

Http2.0 version

  • Binary framing: In HTTP1.x, we transfer data through text, which is represented in a variety of ways, so there are many scenarios to consider to be robust, while binary is robust and convenient.
  • Multiplexing: Avoids the queue header blocking problem of older versions of HTTP, greatly improving transport performance
  • The head of compression
  • Server push

What is the difference between long connections in HTTP1.1 and multiplexing in HTTP2.0?

  • Http1.1 标 签 : serial connection: serial connection: serial connection: serial connection: serial connection: serial connection: serial connection: serial connection: serial connection
  • Http2.0 Multiple requests share the same connection and are in parallel, and all requests do not affect other requests;

9. Introduce CDN? ⭐ ⭐ ⭐

The full name of CDN is Content Delivery Network. Meaning:

  • It distributes the content of the website through the central platform to the edge server deployed in various places for caching, and then forwards the user’s request to the nearest server to obtain the required content through the load balancing technology, which reduces the network congestion and provides the response speed and hit ratio of visiting the website.

Process:

  • The resolved domain name points to a DNS server dedicated to the CDN
  • The dedicated CDN DNS server then points to the CDN load balancer
  • Then visit the load balancing server. It will choose a CDN server to you according to the network address of the browser. It may be a server close to you, and the browser will visit this CDN server
  • If the CDN server does not have the corresponding resources, it will go to the upper cache server to search, if there is no search, it will go to the source station to pull, and cache in each CDN server

Cookie, localStorage and sessionStorage ⭐ ⭐ ⭐ ⭐ ⭐

Cookie: in order to make up for HTTP in the state management deficiency, used for browser and server communication, is “borrowed” to local storage, available document.cookie = ‘… ‘to fix weaknesses

  • The maximum storage size is 4KB
  • HTTP requests must be sent to the server to increase the amount of requested data
  • Insecure, passed in plain text between the browser and the server, easily intercepted by an illegal user and then subjected to a series of tampering to resend the Cookie to the server within its validity period, which is quite dangerous
  • Only document.cookie = ‘… ‘to modify, too crude

Settings:

  • The client sends an HTTP request to the server
  • When the server receives an HTTP request, it adds a set-cookie field to the response header
  • The browser saves the Cookie after receiving the response
  • Cookie information is sent to the server through the Cookie field in each subsequent request to the server.

LocalStorage and sessionStorage

  • HTML5 is specifically designed for storage and can hold up to 5M
  • The API is simple to use setItem getItem
  • Will not be sent out with the HTTP request

The difference between:

  • LocalStorage data will be permanently stored, unless manually deleted or code, suitable for persistent cache data, such as the default preference configuration of the page, such as the official website logo, storage of Base64 format image resources, etc
  • SessionStorage data only exists in the current session, the browser is closed to clear, suitable for one-time temporary data storage, storage of the current browsing information record
  • General use localStorage

Cookie localStorage sessionStorage difference

  • Storage size: cookie4K, storage5M
  • Validity period: Cookie has a validity period. Storage is permanently stored
  • Cookies are sent to the server following HTTP and stored in memory. Storage is only stored on the browser
  • Path: Cookies have path restrictions. Storages are only stored under domain names
  • API: The API of Storage is easier to use

11. What about Websocket? ⭐ ⭐ ⭐

The origin of websocket. The HTTP protocol has a flaw: communication can only be initiated by the client.

Features: the biggest characteristics is the server can be active to the client push information, the client can also take the initiative to send information to the server, is the real two-way equal dialogue data format is lightweight, small performance overhead, communication efficient has good compatibility with the HTTP protocol There is no limit to the homologous, the client can communicate with any server

The WebSocket object is used as a constructor to create a new WebSocket instance. var ws = new WebSocket(‘ws://localhost:8080’);

Property example: The onopen property of the instance object, which specifies the callback function after the connection is successful.

ws.onopen = function () {
  ws.send('Hello Server! ');
}
Copy the code

The onClose property of the instance object specifies the onMessage property of the callback function after the connection is closed. The onError property of the instance object specifies the callback function when the server data is received

12. What are the layers of a computer network? ⭐ ⭐ ⭐ ⭐

  • Application layer: file transfer, email, file service, virtual terminal TFTP, HTTP, SNMP, FTP, SMTP, DNS, Telnet
  • Presentation layer: data formatting, code conversion, data encryption without protocol
  • Session layer: There is no protocol for disconnecting or establishing contacts with other contacts
  • Transport layer: provides end-to-end interfaces TCP and UDP
  • Network layer: Select routing IP, ICMP, RIP, OSPF, BGP, and IGMP for packets
  • Data link layer: transmission of addressed frames and error detection functions SLIP, CSLIP, PPP, ARP, RARP, MTU
  • Physical layer: Transmits data on physical/physical media as binary data

13. What about UDP? ⭐ ⭐ ⭐

UDP:

  1. In the network, it is a connectionless protocol like TCP for processing data packets
  2. Unicast, multicast, broadcast functions
  3. UDP is packet oriented
  4. Unreliable, does not care whether the other party has received the data correctly
  5. The header cost is low and it is very efficient in transmitting data packets

14. What about TCP? ⭐ ⭐ ⭐ ⭐

TCP:

  1. A connection-oriented, reliable transport layer communication protocol
  2. Three handshakes are required to connect and four waves are required to release
  3. Each TCP transmission connection has only two endpoints for point-to-point data transmission. Multicast and broadcast transmission modes are not supported.
  4. Has congestion control and provides full duplex communication

15. Difference between flow control and congestion control ⭐⭐⭐

The difference between flow control and congestion control:

  • Flow control is to solve the problem of data loss caused by the different speed of sender and receiver. When the sender sends too fast, the receiver cannot accept the data, which will result in data loss. Flow control solves the problem in the form of sliding window
  • Congestion control is to solve the problem that too much data is injected into the network, causing the network to crash and exceed the load. When the sender sends data, a large amount of data will be injected into the network. If there is no limit, the network will become overloaded and jammed. Congestion control is solved by congestion window

16. Talk about TCP three-way handshake ⭐⭐⭐⭐⭐

TCP three-way handshake;

  1. First, the client sends a SYN packet with SYN=1 and the initial sequence number seq=x to enter the SYN_SEND state
  2. After receiving a SYN packet from the client, the server also sends a SYN=1 and seq+1 as the ACK value. In this case, the server enters the SYN_RECD state.
  3. After receiving a SYN packet, the client sends an ACK packet, which returns seQ +1 from the server and sends its own SEQ = X +1. After receiving the ACK packet, the server is in the ESTABLISHED state and a connection is ESTABLISHED

17. Why three handshakes, not two? ⭐ ⭐ ⭐ ⭐ ⭐

Three-way handshake is needed to confirm the sending and receiving ability, on both sides of two shake hands, if the client a request stranded for a long time, as the client and the server requests the data release connection, but now the server received the connection, stranded for a long time after the client to establish a connection, will cause the server has been waiting for the client to send data, waste of resources

18. What is a semi-connected queue? ⭐ ⭐ ⭐

After the server receives the SYN from the client for the first time, it enters the SYN_RCVD state. At this time, the two parties have not established a complete connection. The server places the connection requests in this state in a queue, which is called the half-connection queue

19. Can data be carried in a three-way handshake? ⭐ ⭐ ⭐ ⭐

  • Third handshake can, the first and second no, carrying the data for the first time, people shake hands for the first time in the SYN packet to inject a large amount of data, the attacker will not ignore the receiving of the server and send ability is normal, crazy to send a message, will let the server spends a lot of time to receive, and the third time, At this point, the client is in the ESTABLISHED state. For the client, the connection has been ESTABLISHED and the receiving and sending capabilities of the server are normal. Therefore, the client can carry data properly

20. TCP four times wave ⭐⭐⭐⭐⭐

Take the example of a client that wants to close:

  1. Sends the connection release packet segment (FIN=1, serial number seq= U), stops sending data, actively closes the TCP connection, and enters the FIN_WAIT1 state, waiting for the confirmation from the server
  2. After receiving the connection release packet segment, the server sends the confirmation packet segment (ACK=1, ACK= U +1, seq= V). The server enters the CLOSE_WAIT state. At this time, TCP is in the half-closed state. Wait for the server to send the connection release packet segment
  3. If the server also wants to disconnect, it sends the connection release packet (FIN=1, ACK=1, SEQ = W, ACK= U +1) and enters the LAST_ACK state to wait for the client’s confirmation
  4. After receiving the connection release packet, the client sends an ACK packet (ACK=1, SEQ = U +1, ACK= W +1), and enters the TIME_WAIT state. At this time, TCP is not released, and the client enters the CLOSED state after waiting for the timer setting practice of 2MSL(twice the life of the longest packet segment)

21. Why do YOU need four waves? ⭐ ⭐ ⭐ ⭐ ⭐

After closing the connection, the server may not close the SOCKET immediately after receiving a FIN packet. Therefore, it can only reply an ACK packet to the client, telling the client that I received the FIN packet sent by you. I can send the FIN packet only after all the server packets are sent.

22. Why wait 2MSL⭐⭐⭐

In order to ensure that the last ACK segment sent by the client can reach the server, if the ACK is lost, the server will time out and retransmit. The client can receive the retransmitted packet segment within 2MSL event. If the ACK segment is released immediately, the client cannot receive the retransmitted packet segment from the server and will not send the confirmation packet segment. The server cannot enter the CLOSED state.

23. How can you disconnect other than four waves: ⭐⭐

Sending a reset packet:

  • If the host needs to close the TCP connection as soon as possible (or the connection times out, or the port or host is unreachable), the host sends an RST packet (RST indicates reset) to forcibly close the TCP connection. Sending RST Packets When the connection is closed, you can discard the packets in the cache area and directly send THE RST packet. After receiving the RST packet, you do not need to send the ACK packet.

Use of Reset message:

  1. The security device uses reset packets to block abnormal connections
  • When detecting suspicious TCP connections, a security device (such as a firewall or intrusion detection system) constructs a reset packet and sends it to the peer end for the peer end to release the TCP connection. For example, when the intrusion detection detects the TCP connection attacked by hackers, the attacked end sends a reset packet to the hacker host to release the attacked connection.
  1. Attack using reset packets
  • Security devices can use reset packets for security protection, and hackers and attackers can use reset packets to invade and attack certain hosts. The most common attack is TCP session hijacking. For details about TCP session hijacking, see Chapter 3 TCP Session Hijacking.

Write in the last

Thank you very much for reading to the end, if you think it is helpful to you, I hope you can click on the “like”, if you have any questions, please feel free to contact me, I hope we can progress together. Finally, I wish you a bright future, we climb each other, high meet 🌈!