Analysis: What happens between the time the URL is entered and the time the page loads?

  • Query the DNS IP address based on the entered address bar.
  • Initiate a TCP connection to the server over IP.
  • Make an HTTP request to the server;
  • The server processes the request and returns HTTP packets;
  • The browser starts parsing the rendered page and displaying it;
  • Close the connection;

Query the DNS IP address based on the entered address bar (DNS resolution)

  • The conversion from web address to IP address is realized.

  • DNS resolution is a recursive query process.

  • The actual parsing process of all urls is as follows: . ->.com -> google.com. -> www.google.com. Local DNS server -> root DNS server -> com top-level DNS server -> Google.com domain server -> www.google.com IP address.

  • DNS cache.

    DNS has multiple levels of cache, sorted by distance from browser: browser cache, system cache, router cache, IPS server cache, root DNS cache, top-level DNS cache, and primary DNS cache.

  • DNS load balancing, also known as DNS redirection.

    The DNS server will return the IP address of the nearest point to the user, and the SERVER of the CDN node is responsible for responding to the user’s request and providing the required content.

Initiate a TCP connection to the server over IP

See article: TCP protocol details

Knowledge points involved:

  • Understand the FORMAT of TCP packets.

  • Three-way handshake

  • Why do you have to shake hands three times?

Sends an HTTP request to the server & the server processes the request and returns an HTTP packet.

Knowledge points involved:

  • The HTTP protocol.
  • HTTP caching mechanism;

The browser starts parsing the rendered page and displaying it

At this point, the browser takes an HTML document and begins parsing it to render it. The rendering engine starts working, and the basic process is as follows (using WebKit as an example)

  • An HTML document is parsed by an HTML parser to build a DOM Tree, and CSS existing in HTML is parsed by a CSS parser to build Style Rules, which form an Attachment.
  • Construct a Render Tree through Attachment
  • After the Render Tree is built, the layout/reflow stage will assign each stage an exact coordinate that should appear on the screen.
  • Finally, after all nodes are traversed and drawn, a page is displayed.

The process from building the DOM tree to rendering is as follows

The browser is a process of parsing and rendering. First, the browser parses the HTML file to build the DOM tree, then the CSS file to build the render tree, and once the render tree is built, the browser lays out the render tree and draws it to the screen.

This process is complex and involves two concepts: each element in the DOM node is in the form of a box model, which requires the browser to calculate its position and size, etc. This process is called relow; Once the box model position, size, and other properties such as color, font, etc. are determined, the browser begins to draw the content, a process called repain. Pages will inevitably experience reflow and Repain when they first load. Reflow and Repain processes can be very performance draining, especially on mobile devices, and can ruin the user experience, sometimes causing pages to stagnate. So we should reduce reflow and repain as little as possible.

JS parsing is done by the JS parsing engine in the browser. JS is single-threaded, that is, only one thing can be done at a time, and all tasks need to be queued so that the first task can finish before the next one can start. However, there are some tasks that are time-consuming, such as IO reads and writes, so you need a mechanism to do the synchronous and asynchronous tasks first. The execution mechanism of JS can be regarded as a main thread plus a task queue. Synchronous tasks are tasks that are executed on the main thread, and asynchronous tasks are tasks that are executed on the task queue. All synchronization tasks are executed on the main thread, forming an execution stack. An asynchronous task will place an event in the task queue when it has a result. When a script runs, it first runs the execution stack in sequence, then extracts the events from the task queue and runs the tasks in the task queue. This process is repeated constantly, so it is also called Event loop.

When the browser requests external resources, such as images, iconfont, JS, etc., during the parsing process. The browser will repeat the 1-6 process to download the resource. The request process is asynchronous and does not affect the loading of the HTML document. However, when a JS file is encountered during the loading of the document, the HTML document suspends the rendering process, not only until the LOADING of the JS file in the document is complete, but also until the parsing is completed, and the HTML rendering process will continue. The reason is that JS may modify the DOM structure, which means that all subsequent resource downloads are unnecessary before JS execution is completed, which is the fundamental reason why JS blocks subsequent resource downloads. Loading CSS files does not affect the loading of JS files, but it does affect the execution of JS files. The browser must ensure that the CSS file has been downloaded and loaded before executing the JS code.

Close the connection

See article: TCP protocol details

Knowledge points involved:

  • TCP closes the connection with four waves;
  • Why must A WAIT 2MSL in time-wait state?

Refer to the article: segmentfault.com/a/119000000…