Refer to some blogs ~ for your own review ~

Knowledge of network, operating system, and Web.

URL parsing

The user enters a URL, and the browser determines whether it is the search content or the requested URL based on the information entered by the user. For search content, combine the search content with the default search engine to synthesize a new URL with search keywords. If the entered content complies with THE URL rules, the address bar combines the content and protocol into a complete URL according to the rules.

Address resolution

URL encoding

Some special characters need to be encoded and decoded when they are passed between the client and server.

  • EncodeURL, decodeURL: Encoding and decoding of Chinese, space and so on, suitable for encoding the URL itself.
  • EncodeURIComponent, decodeURIComponent: To Chinese, space: / encoding decoding, coding range is wider, suitable for parameter coding.
  • Escape Unescape is mainly used to encode and decode information (such as cookies) during data transmission between different pages on the client.

Check the cache

Next comes the page resource request process.

In this case, the browser process sends the URL request to the network process through interprocess communication. The network process receives the URL request and initiates the actual URL request process here.

First, the network process looks to see if the resource is cached in the local cache. If there is a cached resource and it is cached within the validity period, it is directly returned to the browser process. If the resource is not found in the cache, the network request flows directly.

The first step in making a network request is to perform DNS resolution.

The DNS

DNS resolution: Refers to the process of searching for the external IP address of the DNS server based on the domain name in the URL identified by the browser.

DNS resolution is also cached: the browser usually records the resolution locally once it has done so. So every DNS resolution: local DNS server resolution (recursive), root/top-level/authoritative DNS server resolution (iterative).

DNS Resolution Process

DNS domain name search: The local DNS is queried recursively between the client and the browser. The query between the local DNS server and the root domain and subdomain is iterative.

After the client enters the URL, there is a recursive search process, from the browser cache -> the local hosts file search -> the local DNS parser cache search -> the local DNS server search, any step in the process to find the end of the search process.

As shown in figure:

If the forwarder configured on the local DNS server is not displayed, the forwarder can be queried. If forwarding mode is not used, the iterative search process is shown as follows:

Optimization:

  • Reduce THE number of DNS requests: minimize the number of domain names on your page. HTTP has concurrency, but its concurrency is limited by the source, with a maximum of 4-7 concurrent requests from the same source at a time.

  • DNS Prefetch: The DNS can be preresolved without reducing the number of DNS resolution records. The treatment method is as follows:

<link rel="dns-prefetch" href="//g.alicdn.com"/>

Establish a TCP connection and shake hands for three times

After obtaining the IP address and port of the server through DNS resolution, the TCP connection is established and the three-way handshake is performed.

First, check whether it is HTTPS. If it is, HTTPS is actually composed of HTTP+SSL/TLS, which is to add a layer of module to process encrypted information on the basis of HTTP. Both the server and client are encrypted through TLS. Therefore, the transmitted data is encrypted.

Mark:

  • ACK: Indicates that the packet is received successfully.
  • SYN: Indicates that a TCP connection is initialized and a new connection is initiated.
  • FIN: Releases a connection to remove the previous SYN flag. A complete TCP connection must have SYN and FIN packets.

The data transfer

After the TCP connection is established, the browser constructs the request line, request information, and other data related to the domain name, such as cookies, to the request header, and then sends the constructed request information to the server. If HTTPS is used, TSL negotiation is also required.

The server receives the request and parses the request header. If the header contains information about the cache, such as if-none-match and if-modified-since, the server verifies whether the cache is valid. If so, the status code 304 is returned. If not, return the resource with status code 200.

Close the TCP connection and wave four times

  • First wave
  • Second wave
  • Third wave
  • Fourth wave

Browser rendering

The browser will process the resource based on the resource type. For example, the gzip file will be decompressed. If the response header content-type is text/ HTML, the HTML will be parsed.

According to the chronological order of rendering, it can be divided into the following stages:

Build DOM trees, style calculations, layout stages, layering, rasterization, and display.

Graph TD builds the DOM tree --> Style Calculation --> Layout Stage --> Layer --> Rasterize --> Display
  1. The renderer transforms the HTML content into a DOM tree structure that the browser can read.
  2. The rendering engine translates CSS styleSheets into styleSheets that browsers can understand, calculating the style of DOM nodes.
  3. Create a layout tree and calculate the layout information for the elements.
  4. Layer the layout tree and generate a hierarchical tree.
  5. Generate a draw list for each layer and submit it to the composition thread.
  6. The composition thread divides the layer into blocks and rasterizes the blocks into bitmaps.
  7. The composite thread sends the draw block command to the browser process. The browser process generates the page on command and displays it on the monitor.

Page rendering optimization:

  • An HTML document should have as few levels of deconstruction as possible, preferably no more than six.
  • Script as late as possible.
  • A small number of front-screen styles are placed inline in the TAB.
  • Keep the style hierarchy as simple as possible.
  • Minimize DOM manipulation in scripts and cache DOM access style information to avoid excessive backflow.
  • Reduce the use of JavaScript code to style elements and try to manipulate styles or animations by changing class names.
  • Animation should be used on absolutely positioned or fixed positioned elements.
  • Hide out of the screen, or try to stop the animation while the page is scrolling.
  • Cache DOM lookups as much as possible, and the finder as brief as possible.
  • For websites with multiple domain names, you can enable domain name pre-resolution.