From the perspective of development & operation and maintenance, it is generally divided into the following processes:

  • DNS resolution: Resolves a domain name into an IP address
  • TCP connection: TCP three-way handshake
  • Sending an HTTP request
  • The server processes the request and returns HTTP packets
  • The browser parses the rendered page
  • Disconnect: TCP wave four times

What is a URL?

Uniform Resource Locator (URL) is a Uniform Resource Locator (URL) used to locate resources on the Internet.

scheme: // host.domain:port / path / filename ? abc = 123 # 456789

Scheme - Defines the type of Internet service. Common protocols include HTTP, HTTPS, FTP, and File. The most common type is HTTP, and HTTPS is used for encrypted network transmission. Port - Define the port number on the host (the default HTTP port number is 80) path - Define the path on the server (if omitted, The document must be in the root directory of the web site. Filename - Defines the name of the document/resource query - indicates the query parameter fragment - indicatesHash value after #, usually used to locate a location
Copy the code


Second, DNS domain name resolution

After entering a web address in the browser, the domain name must be resolved first, because the browser does not directly find the corresponding server through the domain name, but through the IP address.

  1. The IP address
An IP Address is an Internet protocol Address, short for IP Address. An IP address is a unified address format provided by the IP protocol. It allocates a logical address to each network and each host on the Internet to shield physical address differences.Copy the code
  1. What is domain name resolution
The DNS provides the service of searching IP addresses by domain names or reverse-searching domain names from IP addresses. DNS is a web server. Our domain name resolution is simply a record of information on DNS.Copy the code
  1. How does the browser query the IP address of the URL by domain name?
DNS domain name resolution is classified into recursive query and iterative query. Currently, it is generally iterative query.Copy the code

Optimization and application of DNS

  1. DNS cache The DNS has multiple levels of cache. Sorted by the distance from the browser, it has the following types: browser cache, system cache, router cache, IPS server cache, root DNS server cache, top-level DNS server cache, and primary DNS server cache.

  2. DNS load balancing (DNS redirection) The DNS load balancing technology is implemented by configuring multiple IP addresses for the same host name on the DNS server. When answering DNS queries, the DNS server returns different resolution results based on the IP addresses recorded in the DNS file. Client access is directed to different machines so that different clients can access different servers to achieve load balancing.

  • The well-known Content Delivery Network (CDN) utilizes the DNS redirection technology. The DNS server will return an IP address closest to the user to the user, and the SERVER of the CDN node is responsible for responding to the user’s request and providing the required Content.
  1. dns-prefetch DNS Prefetch is a DNS pre-resolution technology. When you browse the web page, the browser will resolve the domain name of the web page cache when loading the web page, so that you do not need to perform DNS resolution when you click the connection in the current web page, reducing the user waiting time and improving the user experience.


OSI reference model and TCP/IP four-tier model


TCP three-way handshake

  • The client sends a packet with SYN=1, Seq=X to the server port (the first handshake, initiated by the browser, tells the server I’m going to send the request)

  • The server sends back a response with SYN=1, ACK=X+1, Seq=Y as confirmation (second handshake, initiated by the server, telling the browser I’m ready to accept it, send it now)

  • The client sends back a packet with ACK=Y+1, Seq=Z, which means “handshake over” (the third handshake, sent by the browser, tells the server I’m sending soon, get ready to accept).


4. Send HTTP requests

After the TCP three-way handshake is complete, HTTP request packets are sent.

To avoid getting too long, see HTTP protocol, caching, and more: From HTTP to WEB Caching


5. The server processes the request and returns HTTP packets

The application that handles requests, the Web Server, is installed on each server. Common Web server products include Apache, Nginx, IIS, Lighttpd and so on.

Pretend THAT I am a traditional MVC model, RD students please ignore

The browser parses the rendered page

The main components of the browser

User Interface - including address bar, back/forward button, bookmark directory, etc. What you see is the Browser Engine -- the interface that queries and manipulates the Rendering Engine -- and the Rendering Engine that displays the requested content, for example, If the request is HTML, it parses the HTML and CSS and displays the results. Networking - Used to make network calls, such as HTTP requests. It has a platform-independent interface. JS Interpreter - used to interpret and execute JS code UI Backend - used to draw basic components such as combinatorial selection boxes and dialogs. It has a common interface that is not specific to a particular platform. The bottom layer uses the user interface data storage (DB Persistence) of the operating system - belongs to the Persistence layer. The browser needs to save all kinds of data similar to cookies in the hard disk. HTML5 defines the Web database technology, which is a lightweight and complete client storage technologyCopy the code

1. Multi-process browsers

Browsers are multi-process, with a master process and a new process for each TAB page (in some cases multiple tabs merge processes).

Processes may include master processes, plug-in processes, Gpus, TAB pages (browser cores), and so on

  • Browser process: the main process of the Browser (responsible for coordination and control), there is only one
  • Third-party plug-in process: Each type of plug-in corresponds to one process, which is created only when the plug-in is used
  • GPU process: a maximum of one, used for 3D drawing
  • Browser rendering process (kernel) : one process per Tab page by default, with no influence on each other, controlling page rendering, script execution, event handling, etc. (sometimes optimized, such as multiple blank tabs will be merged into one process)

2. Multi-threaded browser kernel

Each TAB page can be thought of as a browser kernel process, which is multi-threaded and has several classes of child threads:

  1. The GUI thread
  2. JS engine thread
  3. Event trigger thread
  4. Timer thread
  5. Network request thread


After the browser kernel gets the content, the rendering steps can be roughly divided into the following steps:

1. Parse HTML to build a DOM tree 2. Parse CSS to generate a CSS rule tree 3. 4. Render tree (Layout/reflow), responsible for the size of each element, location calculation 5. Render the Render tree (paint), which draws the page pixel informationCopy the code

Take the WebKit kernel as an example

1. HTML parsing and DOM construction

To put it simply, this step goes like this: The browser parses the HTML and builds a DOM tree. From parsing HTML to building the DOM, of course, the process can be summarized as follows:

Bytes → characters → tokens → nodes → DOM
Copy the code

Some of the more critical steps

1. Conversion: The browser will obtain HTML content (Bytes) into a single character based on its encoding. 2. Tokenizing word segmentation: the browser will convert these characters into different token according to the HTML specification standard. Each token has its own unique meaning and set of rules. 3. Lexing: The result of word segmentation is a bunch of tokens, which are then converted into objects that define their properties and rules respectively. Because HTML tags define the relationship between different tags, the relationship is like a tree structure. For example, the parent node of the body object is the HTML object, and the parent node of the segment P object is the body objectCopy the code

2. Parse the CSS to generate a CSS rule tree

Similarly, CSS rule tree generation is similar.

Bytes → characters → tokens → nodes → CSSOM
Copy the code

3. Combine DOM tree and CSS rules to generate render tree

Once the DOM tree and CSSOM are in place, it’s time to build the render tree

In general, render trees correspond to DOM trees, but not strictly one-to-one, because some invisible DOM elements are not inserted into the render tree, such as invisible tags like head or display: None

Render tree (Layout/Reflow), responsible for the calculation of the size and position of each element

Layout: Calculates the position and size of each render object from the render object information in the render tree.

5. Paint the render tree to render the page pixel information

In the paint phase, the system traverses the render tree and calls the renderer’s “paint” method to display the renderer’s contents on the screen.

The four important steps in this image 1. Compute CSS styles 2. Build render tree 3. Layout, main location coordinates and size, whether to wrap, various position overflow Z-index attributes 4. Draw, draw the imageCopy the code
  • Layout, also known as Reflow, means back flow. This typically means that the content, structure, position, or size of an element has changed, requiring recalculation of styles and rendering trees
  • Repaint. Meaning that the changes to the element only affect the appearance of the element (for example, the background color, border color, text color, etc.), then simply apply the new style to the element


Disconnect

When data transfer is complete, you need to disconnect the TCP connection and initiate the TCP wave four times.

  • If the sender sends a packet to the passive party, such as Fin, Ack, or Seq, no data is transmitted. And enter the FIN_WAIT_1 state.(First wave: it is initiated by the browser and sent to the server. I have sent the request message. You are ready to close it.)
  • The passive sends Ack and Seq packets, indicating that it agrees to close the request. The host initiator enters the FIN_WAIT_2 state.(Second wave: from the server, telling the browser that I've received my request and I'm ready to close, so are you)
  • The passive sends a Fin, Ack, or Seq packet to the initiator to close the connection. And enter the LAST_ACK state.(Third wave: initiated by the server to tell the browser that I have sent the response message and you are ready to close it)
  • The packet segment, such as Ack and Seq, is sent to the passive party. Then enter the wait TIME_WAIT state. The passive party closes the connection after receiving the packet segment from the initiator. If the initiator waits for a certain period of time and does not receive a reply, the system shuts down normally.(Fourth wave: initiated by the browser to tell the server, I have received the response message, I am ready to close, you are ready to do the same)


Reference article:

  • The process from entering the URL to page loading
  • TCP/IP protocol
  • TCP three handshakes and four breakups
  • MDN Web Docs