Jsliang Job Search Series – 16 – From entering URL to page rendering

Here’s a classic interview question:

• From the inputURLWhat happens to page rendering?

If you don’t understand, check it out.

After the user enters the URL and presses Enter, the following steps are taken:

1. DNSparsing
2. TCPThe connection
3. sendHTTPrequest
4. Server response
5. The browser parses the rendered page

Of course, this is the overall process, the actual interview will be further detailed questions, and will gradually improve later, so that friends will not be entangled in this series of questions.

DNS resolution is the process of searching the network to find which machine has the resources you need.

The browser typing github.com isn’t really looking for this, it’s looking for the IP address that the domain resolves to.

The unique identification of every computer on the Internet is its IP address, but IP addresses are not easy to remember, which is why the Internet’s designers came up with domain names like Github.com for convenience.

• DNS resolution process:

1. The querywww.baidu.com
2. Access the client DNS cache: browser cache -> system cache (host) -> router cache
3. Access to ISP DNS server (ISP, Internet service provider, including China Unicom, China Telecom and Mobile etc. If you are a telecom network, enter the TELECOM DNS cache server, hereinafter referred to as local), if the local server has, then directly return; If not, ask the local DNS server to consult.
4. Local consultationDNS Root ServerThe DNS root server found yes.com areaManagement, tell the local to consult it.
5. Local consultation.com Top-level domain name server.com top-level domain server is not clear, tell local to consultThe primary area baidu.comServer.
6. The baidu.com domain server searches for the corresponding IP address and returns the IP address to the local host.
7. The local server tells the user,baidu.comThe corresponding IP address, and the cache of this IP address, next time directly access.

This process can be seen, the details are not explained, do not understand to see jsliang’s article:

• Browser – Browser cache
• Computer Networks – DNS

Of course, these two articles will be released later, can be ignored for now.

• Connection establishment stage: 3 handshakes. Establish a connection between the client and the server.
• Data transfer stage
• Disconnect phase: 4 waves. Disconnect the client from the server.

If you don’t understand the process of three handshakes and four waves, please read jsliang’s article for more details:

• Computer network – TCP

Here can also be ignored for further follow-up understanding.

The process of sending HTTP request packets is to construct HTTP request packets and send them to the specified port on the server through TCP (default HTTP port 80/8080 and HTTPS port 443).

An HTTP request packet consists of three parts: the request line, the request packet, and the request body.

• Request line: The common methods are GET, POST, PUT, DELETE, OPTIONS, and HEAD.
• Request headers: Allow the client to pass additional information about the request and the client itself to the server.
• Request body: When using methods such as POST and PUT, the client usually needs to pass data to the server and the data is stored in the request body.

Of course, HTTP requests need to pay attention to whether the cross-domain, how to solve the cross-domain problem:

• Browser – Cross domain

After the request is processed, the server returns an HTTP packet.

An HTTP response packet consists of three parts: a status code, a response header, and a response packet.

• Status code:1xxIndication message – indicates that the request has been received;2xxRequest success – Indicates that the request was successfully received and resolved;3xxRedirect – indicates that further action is required to complete the request;4xxClient error – the request has a syntax error or the request cannot be implemented;5xx: server error – The server failed to fulfill a valid request.Common status code: 200 (success), 304 (request content cached, no update required), 404 (web page or file not found), 500 (server-backend processing error).
• Response headers: Common response header fieldServer,ConnectionAnd so on.
• Response message: text message returned by the server to the browser. Usually, HTML, CSS, JS, and images are stored in this part.

To sum up, the steps 3 and 4 in the URL parsing process are HTTP request and server response, so this part will ask about HTTP status code, HTTPS and other knowledge points, and we will follow up the study in the future. Here we will do the conceptual understanding first.

As shown above, the browser renders as follows:

1. Parsing HTML, generatingDOM 树
2. Parse the CSS and generateCSS Rule Tree
3. willDOM Tree 和 CSS Rule TreeCombine, formRender tree(Render Tree)
4. Starting from the root node, calculate the size and position of each element, and give the exact screen coordinates that each node should appear, thus obtaining the render-based treeLayout Rendering tree(Layout of the render tree).
5. Walking through the render tree, drawing each node with the UI rendering engine to draw the entire tree onto the page is calledDraw the Render tree(Painting the render tree)

This rendering process requires a lot of memorization and very high probability of appearance

Backflow and redraw may occur during parsing rendering:

• Repaint: The browser uses repaint to update elements when the change in style does not affect the layout, with less loss because only the re-pixelation at the UI level is required.
• Reflux (reflow): Also called rearrangement (layout). When an element’s size, structure, or trigger certain attributes, the browser rerenders the page, called backflow. In this case, the browser needs to recalculate, and after the calculation, the page layout needs to be rearranged, so it is a heavy operation.

So:

1. What operations redraw and reflow?
2. How to optimize?

Details:

• Browser – Reflux and redraw

Follow-up article learning is also possible, here first post links.

In the above steps, many optimizations can be found:

• DNS cache
• Browser cache
• Reduce backflow and redraw
• …

If you understand the process, optimization is probably not a problem.

Of course, to make an impression, check out this article compiled by jsliang:

• Browser – Performance optimization

Loading, parsing, and execution of JavaScript blocks DOM building.

That is, if the HTML parser encounters JavaScript while building the DOM, it will stop building the DOM and give control to the JavaScript engine. When the JavaScript is finished, the browser will resume building the DOM where it left off.

That is: the faster the first screen renders, the less JS files should be loaded on the first screen, which is why it is advisable to put the Script tag at the bottom of the body tag, or add defer/async to the script tag.

1. It involves communication between two threads of JS engine and rendering engine, loss performance.
2. Manipulating the DOM can result in repeated backflow, exacerbating performance degradation.

Jsliang’s document library is licensed by Junrong Liang under the Creative Commons Attribution – Non-commercial – Share alike 4.0 International License. Based on the github.com/LiangJunron… On the creation of works. Outside of this license agreement authorized access can be from creativecommons.org/licenses/by… Obtained.