Detailed explanation of the process from url input to page occurrence
1. Domain name resolution dns resolution
1. Resolution process: DNS resolution is a recursive query process
The above picture is the process of finding the IP address of www.google.com. First query the IP address in the local domain name server. If it is not found, the local domain name server will send a request to the root domain name server. If the root domain name server does not exist for the domain name, the local domain name will send a request to the com top-level domain name server. request, and so on. Until finally the local domain name server gets Google's IP address and caches it locally for the next query. From the above process, it can be seen that the resolution of the URL is a process from right to left: com -> google.com -> www.google.com. But did you find something missing, what about the resolution process of the root domain name server? In fact, the real URL is www.google.com. It’s not that I typed an extra ., this . corresponds to the root domain name server. By default, the last digit of all URLs is ., since it is the default Next, for the convenience of users, it is usually omitted, and the browser will automatically add it when requesting DNS. The real resolution process of all URLs is: . -> .com -> google.com. -> www.google.com.
2. Establish tcp connection three times
3. Send http request
HTTP request message is composed of three parts: request line , request header and request body .
Take Baidu as an example: https://www.baidu.com:8080/home?name='xxx'
https/http: request protocol
www.baidu.com: domain name
:8080:port
/home: path
?name='xxx': parameter
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-L5J1BDPD-1676107430661) (C:\Users\Administrator\Desktop\Finding missing notes and knowledge summary\http. jpg)]
-
The difference between http and https
4. The server processes the request and returns the http message
The HTTP response message is also composed of three parts: status code , response header and response message .
5. The browser parses and renders the page (that is, the operating mechanism of the browser)
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-0Q3e8km5-1676107430661) (C:\Users\Administrator\Desktop\Finding missing notes and knowledge summary\Web page rendering mechanism.png)]
After obtaining the code from the server, the browser opens up a stack memory in the memory to provide an environment for the execution of the code, and at the same time allocates a main thread to parse and execute the code line by line, precompile the code first, and then from top to bottom Next execute the code, when the browser encounters a link/script/img request (after quoting the link), it will open up a new county to load the resource file, and put the link/script/img into the TASK QUEUE (task queue), and then Continue to execute the code, and when dom is encountered, a dom tree is generated, and css is processed to generate a cssOM tree. When the dom tree and css tree are built, it is necessary to wait for the tasks in the task queue to be executed. When the tasks in the task queue After the execution is completed, execute the Render function, dom tree and css tree for rendering (rendering tree), then reflow and redraw, and finally display sends the pixels to the GPU for rendering on the page
Note: Because js runs in a single thread, it can only do one thing at the same time. When js parses/executes code from top to bottom, when it encounters external links/scripts/micro tasks/macro tasks, it will Open up a new thread to load or execute external links/scripts/microtasks/macrotasks, which forms an event loop Event Loop
dom element rendering
-
Parse the HTML Source and generate a DOM tree.
-
Parse CSS and generate CSSOM tree.
-
Combine the DOM tree and CSSOM tree to remove invisible elements (very important) and generate a rendering tree (Render Tree).
-
Layout (Layout): According to the generated rendering tree, layout ( Layout ) is performed to obtain the geometric information (width, height and position, etc.) of the nodes.
-
Painting (redrawing): Render each pixel of the Render Tree to the screen according to the geometric information obtained by the render tree and reflow.
Summary: Redrawing does not bring about re-layout, not necessarily accompanied by reflow (rearrangement)
Redraw:
When the style of some elements on the page changes without affecting their position in the document flow, the browser will redraw the elements, and this process is called redrawing . For example: modify the background color of the element, the font color, etc.
Trigger redraw:
- Color, background related attributes: background-color, background-image, etc.
- Outline related attributes: outline-color, outline-width, text-decoration
- border-radius、visibility、box-shadow
Reflow:
When the size, structure, or properties of some or all elements in the rendering tree change, the browser will re-render some or all of the rendering process, which is called reflow. For example: change the distance of marge, the size of font, the width and height of elements, etc.
Trigger reflow:
- The first render of the page
- The browser window size changes
- The content of the element changes
- The size or position of the element changes
- The font size of the element changes
- Activate CSS pseudo-classes
- Query certain properties or call certain methods
- Add or remove visible DOM elements
Note: When reflow is triggered, redrawing must be triggered, but redrawing does not necessarily cause reflow .
Reduce reflux:
- Reduce dom operations
- Separation of reading and writing (get the element and put it in one piece, modify the width and height of the element and put it in one piece)
- Centralized style modification: divStyle.cssText = 'width:100px;height:100px;border:1px solid black'
- Batch modification of elements: using document fragments, createDocumentFragment will create the elements that need to be created at one time and splicing them to the dom at one time
- The animation effect is applied to the element whose position property is absolute or fixed (out of the document flow)
- Reduce table layout
6. Disconnect: When the data transmission is completed, the tcp connection needs to be disconnected, and at this time, send tcp four times to wave
The detailed diagram is as follows:
Due to the large size of the picture, one screenshot cannot be taken, sorry, it can only be divided into two pictures
