Preface 🍊

“What happens in the browser between entering the URL and presenting the page?” This is a classic interview question, especially small make up before met when I was in an interview, the interviewer let small make up as much as you can say, small make up the received, thought “this is not, but why speak rendering the page, please press the enter key then request, have what can say ah”, almost didn’t make a joke, think carefully about this problem, find really very deep, There are many things involved in this process. The answer to this question can really be a good test of the level of a Web engineer, in order to students in the future when this problem can be knocked down the interviewer, today xiaobian from the network principle and browser principle of two aspects to tell you a good break off

Overall flow chart

Here xiaobian sorted out a rough flow chart, can help you better understandAs you can see, the entire process requires coordination between processes, so before we start the formal process, let’s quickly review the responsibilities of the main processes.

  • Browser processMainly responsible for user interaction, sub-process management and file storage, including address bar, bookmark bar, forward and back buttons and other parts of the work; Handles the browser’s invisible low-level operations, such as network requests and file access;
  • Network processIs for rendering processes and browser processes to provide network download capabilities.
  • Rendering processThe main responsibility of The TAB is to be responsible for all aspects of web page rendering: parsing HTML, JavaScript, CSS, images and other resources downloaded from the web into pages that can be displayed and interacted with. Because all the contents of the renderer process are obtained through the network, there will be some malicious code to exploit browser vulnerabilities to attack the system, so the code running in the renderer process is not trusted. This is why Chrome makes the rendering process run in a security sandbox, just to keep the system safe.
  • Plugin ProcessResponsible for controlling all plug-ins used by a web page, such as Flash
  • GPU ProcessResponsible for processing GPU-related tasks

In this article, we put the UI thread and memory thread into the browser process. Google Browser controls whether to split the browser process into different threads according to the performance of different machines, and different browsers use different architectural patterns

Browser processes and network processes 🍊

The first part focuses on what the WEB process and the UI thread in the browser process do when entering the URL

Let’s start with the functions of these different threads:

  • UI thread: Controls buttons and input fields on the browser;
  • Network process: processing network requests and obtaining data from the network;
  • Memory threads: control access to files, etc;

Going back to our original flow chart, when we type text into the browser’s address bar and hit Enter to get the page content, the browser’s view of the process can be broken down into the following steps:

  1. Processing input: The UI thread needs to determine what the user is typingURLorquery; If it is a query, the URL is concatenated; otherwise, the URL is accessed directly
  2. Press enterThe UI threadWhere theBrowser processFirst check if there is a return such as 301 that has been recorded. For such a request, first perform a redirection operation, which is pure client behavior, and then proceed to the next step. Otherwise, proceed to the next step
  3. throughIPC communication between processesTo notifyNetwork processInitiate a request to obtain web content, UI thread control TAB loading animation start jump;
  4. The network process looks it up first when requesting itBrowser cache, because the requested resources may have been cached in the browser, if the resources on the server are not added, deleted or modified, the cached resources will be used directly, without the need to request and download resources to the server again, so that the server reduces the request. The user also saves bandwidth so we often see status code 304, plus requests for proxy caching (nginx, Apache)

Network – Understanding of HTTP 304 status code

  1. If there is no cache, the network process continuesThe DNS query: The domain name must be converted into an IP address to access the server. Therefore, check the CORRESPONDING IP address of the domain name.

How does the browser query the IP address of the URL by domain name?

  • Browser cache: The browser caches DNS records at a certain frequency.
  • Operating system cache: If you can’t find the DNS record you need in the browser cache, look for it in the operating system.
  • Route cache: Routers also have DNS caches.
  • DNS server of an ISP: AN ISP has a dedicated DNS server to respond to DNS query requests.
  • Root server: If the ISP’s DNS server cannot be found, it sends a recursive query to the root server (DNS server first asks the IP address of the root DNS server.

  1. If the TCP connection is HTTPS, an encrypted connection must be created after the TCP three-way handshake to encrypt the upper-layer data for communicationSSL/TLS connection)

How does an HTTP request establish a three-way handshake first?

For HTTPS connections, you can check out my other article on the SSL handshake process 🍊

  1. Sends HTTP Request packets
  2. If it is a short connection, close the connection with four waves, otherwise continue to use the pipe to transmit data
  3. If I go back to the header301 redirectThe network process notifies the UI thread that the server is requesting a redirect, after which another URL request is triggered
  4. Otherwise, the network process will depend onContent-TypeTo determine the format of the response content, if it is text or HTML rendered by the renderer process, otherwise if it is file notification download manager;
  5. Judge after HTMLSafe BrowsingWill check whether the web page is secure, unsafe network processes will display a warning page, in additionCORB Detection (Cross-domain resource sharing)Also triggers to ensure sensitive data is not passed to the renderer process;
  6. When all checks are complete and the network process is sure it can navigate to the requested page, it notifies the UI thread that the data is ready, and the UI thread finds oneThe render processRender the page;

Branch 1: If you listen for the beforeUnload event, this event again involves the interaction between the browser process and the renderer process. When the current page is closed (close Tab, refresh, etc.), the browser process needs to notify the renderer process to check for related events.

Branch line 2: In addition to the above process, some pages also have Service workers (Service Worker threads), which give developers more control over local caching and deciding when to pull information from the network. If the Service Worker is set up to load data from the local cache, there is no need to fetch more data from the network.

The renderer process 🍊

Let’s move on to the main thread, where we’ll talk about how the renderer process renders the page to the corresponding TAB once the data and renderer are available: the address bar is updated to show the new page. The history TAB is updated so that you can return to the navigation page by using the back key. This information is stored on the hard disk for easy recovery after closing the TAB or window.

The rendering process mainly contains the following threads:

  • Main thread
  • Worker thread Worker thread
  • Compositor threads
  • Raster thread

The main workflow is as follows, hahaha…

Ok, to get down to business, the renderer workflow is as follows:

  1. The main thread converts the HTML file into a DOM tree structure that the browser can read. Each tag in THE HTML is a node in the DOM tree. The root node is the document object that we commonly use. None hidden, elements added dynamically with JS, etc. The process of DOM tree parsing is a depth-first traversal, where all children of the current node are built before the next sibling node is built. The secondary resources are loaded through a network process, and when js is encountered, the DOM tree is stopped and JS is executed.
  2. The main thread converts the CSS file into something that the browser can readCSSOM (CSS Object Model)This process recurses all the labels that should be styled, CSS selectors matching from right to left, such as a > span {color: red; }, our seemingly “fine” selector is actually quite expensive: the browser has to traverse every span element on the page, and each time it has to make sure that the parent element of the SPAN element is not an A tag, and then set the color of the span tag that matches this condition, so the recursive process is very complicated. So we should avoid writing too specific CSS selectors as much as possible, and add as few meaningless tags as possible for HTML, keep the hierarchy flat, and use class selectors instead of tag selectors.)And standardize the attributes in it(Remove styles that browsers don’t recognize, such as -moz in Internet Explorer and _ in Firefox)Finally, the style of each node is calculated.While the CSSOM is parsed, JS execution is paused until the CSSOM is ready and the browser does not render until the CSSOM is generated.
  3. The main thread gets byThe DOM treeandCSSOM Synthesis of a treeRender treeUnlike DOM trees, render Tree recognizes styles, each node in the Render Tree has its own style, and there are no hidden nodes in the Render Tree (e.g. Display: None, and head), because these nodes will not be used for rendering and will not affect rendering (note: undefined: hidden elements will still be included in the Render tree, because undefined: Hidden affects the layout and takes up space.The location and size generation of each render object are calculated by rendering object information in the render treeLayout TreeAfter the layout is complete, if some part (size, position, etc.) changes that affect the layout, you need to go back and recalculate the render tree and re-render it (this is called backflow). If an element’s background color, text color, etc., does not affect the attributes of the surrounding or internal layout of the element, the browser will simply redraw the element based on its new attributes (without changing the render tree), giving the element a new appearance (this is called repainting).

  4. Even if we know the location and style of the different elements, we still need to know the order in which the different elements were drawn to correctly draw the entire page. During the draw phase, the main thread traverses the layout tree to create the draw record. Drawing records can be regarded as notes recording the sequence of drawing elements.
  5. Composition is a technique for splitting pages into layers, rasterizing them individually, and then combining them into frames. Composition of the different layers is done by the Compositor thread. The main thread uses the resulting layout tree to layer and get a layer tree.
  6. The compositing thread blocks the layer (rasterization) and bitmaps the image blocks in the viewport area (divided into multiple tiles), and saves the obtained results into GPU memory through the GPU process.
  7. (Once the magnet israsterizerThe compositing thread collects bitmap information (called drawing quadrilateral tile information) to create compositing frames and pass the messages throughThe IPC agreementTo the main browser process, the main process receives the message, the page contentdrawTo memory, and finally to display memory on the screen.
  8. When the renderer process finishes rendering (which means that all pages within the page, including all iframes, have triggered onload), it sends an IPC signal to the browser process and the UI thread stops displaying the TAB spinner.

Summary: Generate various trees, including DOM Tree, CSS Tree, Layout Tree, Layer True, Render Tree, these are GUI rendering threads in the renderer process. The js script parsing execution is the same process under the JS engine thread to do, that is, the famous V8 engine. As for the timer callback, it is the timer thread to count, after counting, the callback will be pushed into the task queue maintained by the event trigger thread. When the JS thread is idle and the micro task queue maintained by this thread has no event, it will go to the task queue to get macro tasks for processing.

Disconnect the link 🍊

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)

Event Handling 🍊

You should probably be able to answer the questions at the beginning of this article with ease, but if you want to add some extra credit, read the following in a few minutes

  1. If the page has a binding event, the browser process sends the event type and the corresponding coordinates to the renderer process
  2. A new UI is created while scrolling, and the synthesizer can synthesize new frames independently of the main thread without waiting for the main thread to respond. But if there are bound events in a region of the scroll (this region is called the non-fast scroll region)Non-fast scrollable regionIf this flag exists, the synthesizer thread will send the event to the main thread and wait for the main thread to process it before synthesizing a new frame3. But if the entire page is bound to something likeAddEventListener (' pointermove)Such events, every time to ask, usepassive: trueSmooth scrolling is possible, but vertical scrolling may precede itevent.preventDefault()Occurs when you can passevent.cancelableTo prevent that. CSS properties can also be usedtouch-actionTo completely eliminate the influence of the event handler
  3. When the combinator thread sends an input event to the main thread, the main thread looks for the element associated with the event based on the drawing record
  4. Chrome merges for optimization purposesSequential event(e.g. Wheel, mouseWheel, Mousemove, Pointermove, TouchMove) Mouse movement, scrolling, etc., and delay the execution until the next frame rendering. Examples include keyDown, KeyUp, mouseup, mouseDown, TouchStart, and TouchEndDiscontinuous eventIs triggered immediately.Merge events can be used to indicate performance, but if your application is painting, etc., it is difficult to draw a smooth curvegetCoalescedEventsThe getCoalescedEvents API gets each event (otherwise it becomes a line between two points)

This article here you should be able to achieve the final goal: knock down the interviewer, code word is not easy, please give a small love ♥, plus a wave of attention three even praise 👍

Reference 🍊

  • Main References:

Illustrate the basic workings of the browser

  • Some pictures quote address:

Discover the secrets of browser rendering

Typical front-end interview question: What happens from entering the URL to loading the page?