|
Preface I've been so busy lately, the app is going to launch a series of features... I just want to lie down on the weekends. Today's article is from a buddy's article on network performance optimization. Although he is a front-end developer, the network is "everyone's" business, so I think it's good for friends of all professions to read it~ Emphasize the complete process of HTTP request - DNS resolution
- First, the browser's own DNS cache is searched (the cache time is relatively short, only about 1 minute, and can only hold 1,000 caches)
- If the browser does not find the URL in its own cache, it will search the system's own DNS cache.
- If it is still not found, try looking in the hosts file.
- If the first three steps do not obtain the domain name, recursively search the domain name server.
- Establishing a TCP connection
- After obtaining the IP address corresponding to the domain name, the browser will send a link request to port 80 of the server's WEB program (commonly used ones are httpd, nginx), etc. with a random port (1024<port<65535).
- The connection request (the original http request is encapsulated layer by layer in the TCP/IP 4-layer model) arrives at the server (there are various routing devices in between, except for the LAN)
- Enter the network card, then enter the kernel's TCP/IP protocol stack (used to identify connection requests, decapsulate packets, and peel them off layer by layer), and may also be filtered by the Netfilter firewall (a module belonging to the kernel), and finally reach the WEB program
- TCP/IP connection established
- TCP connection three-way handshake/four-way handshake
- SYN > SYN-ACK > ACK (HTTPS protocol also has an SSL handshake process)
- Three-way handshake
- If HTTP redirects, the handshake process starts from the beginning
- Web browser sends HTTP request message
- HTTP request message consists of three parts: request line, request header and request body
- Web server sends HTTP response message
- HTTP response also consists of three parts: status code, response header and entity content
- Web server closes TCP connection
Assuming a typical broadband environment - No local cache
- Relatively fast DNS resolution (50ms), TCP handshake, SSL negotiation
- Faster server response time (100ms)
- One-time delay (80ms)
Network transport layer time analysis - Total time (470ms)
- 50ms for DNS
- 80ms for TCP handshake (one RTT)
- 160ms for SSL handshake (two RTT's)
- 40ms (sending request to server)
- 100ms (server processing)
- 40ms (server sends back response data)
- A request takes 470ms. In fact, 470ms is already very optimistic.
- (Earlier data, current DNS pre-resolution and optimization have reduced this time)
Optimization plan The fastest request is no request Optimize DNS resolution - Using DNS Cache
- Speed up DNS resolution
- Using DNS Load Balancing
- Configure multiple IP addresses for the same host name. When answering DNS queries, the DNS server will return different resolution results for each query in sequence using the IP address of the host record in the DNS file, directing the client's access to different machines, allowing different clients to access different servers, thereby achieving the purpose of load balancing.
Optimizing cache performance - The concept of strong cache and negotiated cache
- 1) When loading a resource, the browser first determines whether it supports strong caching based on some http headers of the resource. If it supports strong caching, the browser will directly read the resource from its own cache without sending a request to the server. For example, if a CSS file is configured to support strong caching when the browser is loading the web page it is on, the browser will directly load the CSS file from the cache without even sending a request to the server where the web page is located.
- 2) When the strong cache is not successful, the browser will definitely send a request to the server, and the server will verify whether the resource is successfully negotiated based on some other http headers of the resource. If the negotiated cache is successful, the server will return the request, but will not return the data of the resource. Instead, it will tell the client that it can load the resource directly from the cache, so the browser will load the resource from its own cache again;
- 3) The common point is: if ***, resources are loaded from the client cache instead of loading resource data from the server;
- 4) The difference is: strong cache does not send requests to the server, while negotiated cache does send requests to the server.
- 5) When the negotiation cache is not successful, the browser loads resource data directly from the server.
- Cache implementation: local disk and memory
- Memory mode is mainly used for incognito browsing, and is cleared when the window is closed.
- The disk cache implements its own set of data structures, which are stored in a separate cache directory. These include index files (loaded into memory when the browser starts), data files (which store the actual data, as well as HTTP headers and other information)
- Implementation: Expires, ETag, Last-Modified, keepalive, Cache-Control (for details, please go to HTTP-header)
Using Service Worker - Concept: Developed by Google, a service Worker thread is started in the background. Its function is that no matter how many pages are opened, there is always only one Worker responsible for management, caching resources, intercepting page requests, and checking the cache.
- Service Worker combined with Web APP Manifest can be used offline. When the network is disconnected, it returns 200 and prompts the user to add the website icon to the desktop (which is also the detection standard of PWA)
- Compatibility issue: All browsers now support Service Worker
Use Chrome Devtools to optimize transmission resource inspection and optimize volume - console
- console.log: no explanation
- console.table: Print complex data structures in tabular form
- console.dir: recursively print all properties of an object
- console.trace(): trace the calling trace of the function
- console.group()、console.groupEnd(): print information in groups
- Print with style
- Print with style
- Check for unused CSS/JS
- more tools=>Coverage
Data provided by Chrome browser - View cached data and response processing: chrome://net-internals/#httpCache
- DNS metrics: chrome://histograms/DNS
- DNS cache: chrome://net-internals/#dns
- Chrome browser URL table: chrome://chrome-urls/
|
