Schematic diagram of network request process:

Schematic diagram of network communication process:

  1. Before sending a request, determine the FOLLOWING IP address: 1. There is an IP address on the local device. 2
  2. Three handshakes to establish a link
  3. Send the request
  4. Wave four times to close the link

Look for areas to optimize:

  • Client request delivery time: faster
  • How long it takes the server to process a request after it receives it (find data…) Faster:
  • Server response time to send data to client: faster
  • Time to render a page after the client gets the data: faster
So there are two parts:
  1. Faster network communication
  2. More efficient data processing

Specific means to achieve performance optimization:

1. DNS (global load balancer + Cache system)

Principle: the establishment of a number of servers, among which there is a master server, the master server will choose a best (such as: from your nearest/load better) server to respond to your request, in order to achieve the purpose of speed.
Global load balancing: If there are too many requests from one server and other remote servers are idle, then the idle server may be preferred to respond to data.
Caching system
  • shooting

In addition to the primary server, other servers will periodically synchronize data to the primary server, so the current request server may not have the required resources, then it is said that the hit ratio is low.

  • Back to the source rate

If the server does not have the data it needs, it will go to the primary server to synchronize the data, so it is said that the back source rate is high.

2. Resource combination (Sprite picture) not recommended!

At the end of each send request, the established link will be disconnected, so it is time-consuming to re-link, so try to reduce the number of send.

3. Domain fragmentation (multiple domain names) not recommended!
  • Standard for concurrent requests: Only two concurrent requests can be sent to the same domain name. However, the browser implementation did not follow the standard, and now the number of concurrent requests in browsers is 6-8, of which Chrome has 6. And then the criteria were dropped. Then you can fragment the domain name, that is, you can create a second level domain name.
4. Data transmission level – cache (the request without request must be the fastest) (generally implemented in the middle layer of the front end)

Strong cache

Negotiate the cache

There will be an extra field, the purpose is to compare whether the data has changed, change the retransmission

5. Data transmission layer – compression

  • Transfer smaller data, require less time, BR is currently only supported by Chrome
  • webpack:treeshaking…
  • Use font ICONS instead of images. Metadata has nothing to do with how images are displayed, but it takes up more memory
  • The HTTP1 header has a lot of data, and the HTTP2 header is compressed.

  • By storing a table, the data size in the process of sending can be reduced. You only need to send a marked field to query the corresponding data in the table.

  • Changes have been made to the format of the data flow

  • Link already established, but not used (probably processing data…) , it would be a waste of time for other requests to use this link.