What happens from a url to when the final page is rendered

1. DNS resolution: resolve domain name address to ip address

- Browser DNS cache
 - System DNS cache
 - Router DNS cache
 - Network operator DNS cache
 - Recursive search: blog.baidu.com
   - Find DNS resolution under .com domain name
   - .baidu 
   - blog 
   - Error

2.TCP connection, TCP [three-way handshake]

- The first handshake, initiated by the browser, tells the server that I want to send a request 
- The second handshake, initiated by the server, tells the browser that I am ready to accept, you can send it quickly 
- The third handshake, sent by the browser , tell the server, I will send it immediately, and receive it when you are ready

3. Send the request

- Request message: communication content of Http protocol

4. Accept the response

- Response message

5. Render the page

- When an HTML tag is encountered, the browser calls the HTML parser to parse it into a Token and builds it into a DOM tree 
- When it encounters a style/link tag, the browser calls the CSS parser, processes the CSS tag and builds a cssom tree 
- When it encounters a script tag, calls the JavaScript parser, Process script code (bind events: modify dom tree, cssom tree) 
- combine dom tree and cssom tree into one rendering tree 
- calculate layout according to rendering tree, calculate geometric information of each node 
- draw the color of nodes to the screen up (render)
Note: These five steps are not necessarily performed in order, if the dom tree or cssom tree is modified, multiple renderings and layouts may be performed.
Often in actual pages, these steps are performed multiple times.

6. Disconnect: TCP waves four times

- The first wave, initiated by the browser, sent to the server, my things have been sent (request message), you are ready to close 
- The second wave, initiated by the server, tell the browser that my things are accepted It's over (request message), I'm going to close it, so are you ready 
- wave your hand for the third time, initiated by the server, tell the browser that my things have been sent (response message), you're ready to close it 
- wave your hand for the fourth time , initiated by the browser, tell the server that my things have been received (response message), you are ready to close it

Leave a Comment

Your email address will not be published. Required fields are marked *