1. We first open a browser and type in the address bar at the top, such as www.baidu.com (this is the domain name of the server) 2. After entering the address, we press Enter. First, the client sends the address to the DNS (a data server that stores the mapping between the domain name and IP address of the server), obtains an IP address through the resolution, and accesses the corresponding server through the IP address. 3. Start to establish a TCP connection (three-way handshake) First: The client sends a connection request to the server. The second time: the server sends an acknowledgement request to the client and sends a connection request together, requesting to connect to the client. Third: After receiving the confirmation message and connection request from the server, the client sends the confirmation request to the server. The TCP connection is successfully established between the client and server. 4. Send a request. For example, we need to access “digging gold” through Baidu search, we need to enter “digging gold” in the search box and press Enter. 5. After receiving the request, the server responds to the resource. After that, the browser needs to parse and render the resource. 6 (Client) The browser parses and renders the received resources: The browser parses the HTML in the received resources and generates a DOM tree. (D– > Document O– > Object M– > Model) The browser parses the CSS in the received resource and generates the CSSOM rule tree. The DOM tree and the CSSOM rule tree are combined to create a render tree from which the browser can render the page, and then the user sees the page.
One of the things to remember is that every TAB the browser opens is a process, and we can open multiple processes at the same time. Each process has multiple threads, including a JS thread and a UI thread. The UI thread handles HTML and CSS, and the JS thread handles JS. The UI thread builds HTML into a DOM tree and CSS into a CSS tree. The DOM tree and CSS tree are combined to form a rendering tree. Once the tree is formed, the browser can render from the tree.