I have been collecting gold for a long time. Recently, TAKING advantage of the epidemic, I decided to contribute to the community and started writing. Since the work of their own accumulated articles slowly sorted out to share on the nuggets, code words are not easy, if it is helpful, please like and follow the nuggets account and the public number, I will always share my front end development advanced full stack road, we work together.

Today, I will bring you the front end performance optimization questions that will be asked in the front end interview. I have three tentative phases to bring to you. The first two phases have talked about how to optimize performance at the code level, and this period will bring you optimization at the network transport layer.

Pay attention, don’t get lost.

To read all the articles, click here

Reading time: 3 minutes

Read this article to learn:

  • The complete process of an HTTP request
  • Network transport level performance optimization
  • Reasonable usechrome-devtoolTo develop

Emphasize the complete process of HTTP requests

  • The DNS
    • First, the browser’s own DNS cache is searched (the cache time is relatively short, about 1 minute, and can only hold 1000 caches).
    • If it is not found in the browser’s own cache, the browser will search the system’s own DNS cache
    • If you haven’t found it yet, try looking in your hosts file
    • In the case of none of the previous three procedures, we recursively go to the DNS server to look for it
  • Establishing a TCP Connection
    • After receiving the IP address corresponding to the domain name, the browser will use a random port (1024< port <65535) to the server’s WEB program (commonly used HTTPD, nginx) port 80 link request.
    • The connection request (the original HTTP request passes through the TCP/IP4 layer layer packet) reaches the server (with various routing devices in between, except within the LAN).
    • Into the network card, then into the kernel TCP/IP stack (used to identify connection requests, decapsulate packets, layer by layer peel), and possibly through the Netfilter firewall (modules belonging to the kernel) filtering, finally to the WEB program
    • A TCP/IP connection is established. Procedure
  • Three-way handshake/four-way handshake for TCP connections
    • SYN > SYN-ACK > ACK(HTTPS has an SSL handshake)

The three-way handshake is to confirm that the receiving and sending capabilities of the client and the server are normal and the interaction times are the least. The four-way handshake is of course to add a security protocol

  • For HTTP redirects, start the handshake process from the beginning
  • The Web browser sends an HTTP request packet
    • An HTTP request packet consists of three parts: request line, request header, and request body
  • The Web server sends an HTTP response packet
    • The HTTP response also consists of three parts: the status code, the response header, and the entity content
  • The Web server closes the TCP connection

Consider a typical broadband environment

  • No local cache
  • Relatively fast DNS resolution (50ms), TCP handshake, AND SSL negotiation
  • Fast server response time (100ms)
  • One-time delay (80ms)

Network transport layer time analysis

  • The total time (470 ms)
    • 50ms for DNS
    • 80ms for TCP handshake (one RTT)
    • 160ms for SSL handshake (two RTT’s)
    • 40ms (send request to server)
    • 100ms (server processing)
    • 40ms (server sends back response data)
  • One request costs 470ms. In fact, 470ms is optimistic
  • (Earlier data, and current DNS preresolution and optimization have reduced this time.)

Optimization scheme

The fastest request is no request

Optimize DNS resolution

  • Using the DNS cache
    • Speed up DNS resolution
  • Use DNS load balancing
    • For the same hostname configure multiple IP addresses, in response to the DNS query, the DNS server for every query will with the IP address of the DNS host file record return different analytic results according to the order will lead to different client access machines, make different client access server, so as to achieve the aim of load balancing.

Optimize cache performance (more on caching in a future article)

  • Concepts of strong caching and negotiated caching
    • 1) When the browser loads a resource, it first bases it on some of the resourceshttp headerIf it hits the strong cache, the browser reads the resource directly from its own cache without sending the request to the server.
    • 2) When the strong cache is not hit, the browser must send a request to the server, through the server side according to the resource of some otherhttp headerIf the resource matches the negotiation cache, the server returns the request, but does not return the data about the resource. Instead, the server tells the client that it can load the resource directly from the cache. The browser then loads the resource from its own cache.
    • 3) The common point is: if the match is made, the resource is loaded from the client cache, not from the server.
    • 4) The difference is: The strong cache does not send requests to the server, but the negotiation cache does.
    • 5) When the negotiation cache is not hit, the browser directly loads the resource data from the server.
  • Cache implementation: local disk and memory
    • The memory mode is mainly used for intraceable browsing and is cleared when the window closes
    • Disk caching implements its own set of data structures, which are stored in a separate cache directory. There are index files (loaded into memory when the browser starts), data files (which store the actual data, along with HTTP headers and other information)
  • Expires, ETag, last-Modified, Keepalive, cache-control (more on that later)

Use the Service Worker

  • Concept: A service Worker thread developed by Google and started in the background, whose function is that no matter how many pages are opened, only one Worker is in charge of management, cache resources, intercept page requests and view the cache.
  • The Service Worker, combined with the Web APP Manifest, can be used offline. When the Internet is disconnected, the Service Worker returns 200, prompting the user to add the website icon to the desktop (also a PWA detection standard).
  • Compatibility issues: All browsers now support Service workers

Optimize transfer resource check and optimize volume with Chrome Devtools

  • console
    • The console. The log: don’t explain
    • Console. table: Prints complex data structures in tabular form
    • Console. dir: Prints all the properties of the object recursively
    • Console.trace (): traces the call trail of a function
    • Console.group () and console.groupend (): print information in groups
    • Print with style

  • Check for useless CSS/JS
    • more tools => Coverage

Data provided by the Chrome browser

  • View cached data and response processing: Chrome ://net-internals/#httpCache
  • DNS metrics: Chrome ://histograms/DNS
  • DNS cache: chrome://net-internals/# DNS
  • Chrome ://chrome-urls/

Write in the last

  • The front-end performance optimization is completed in three phases. Click the profile picture on the home page to view all the contents.
  • Related knowledge is home page jun arrangement, some parts of the content may not be detailed enough, the home page has been marked, the follow-up will continue to bring you, please pay attention to.

Front-end performance optimization series consists of three parts. Click the profile picture on the home page to continue learning