1. What happens when I enter the Url address and press Enter?
1: Perform DNS resolution according to the URL, and resolve the corresponding domain name to an IP address.
2: The client finds the corresponding server according to the IP address and performs a TCP three-way handshake to establish a TCP connection.
3: The client initiates an HTTP request to request the corresponding resource.
4: The server responds and returns corresponding data (such as HTML files).
5: The browser parses the obtained HTML document into a DOM tree (Document Object Model) by the HTML parser .
6: while the CSS parser will parse CSS styles to CSS rules tree (CSS Rule Tree).
7: The resulting DOM tree and CSS rules tree merger generated render tree (Rendering Tree).
8: According to the rendering tree, layout the elements on the screen .
9: The render tree, the individual elements of the drawing (Paint) on the screen.
10: The client and the server waved their hands four times over TCP.
The parsing and rendering principle of the browser is shown in the following figure:
2. Precautions for browser rendering of web pages
1: The DOM construction process is a deep traversal process, that is, the next sibling node of the current node will be constructed after all the child nodes of the current node have been constructed.
2: The render tree is different from the DOM, because elements like display:none in the DOM tree will not appear in the render tree, but visibility:hidden will appear in the render tree.
3: DOM parsing and CSS parsing are carried out at the same time and do not affect each other.
4: render tree is generated not wait until the DOM tree and CSS rules tree parsed began to merge, and is analytic side, while the merger rendering.
3. The blocking sequence of browser rendering webpages
1: When constructing the DOM tree, if JS elements are encountered, the construction of the DOM tree and CSS rule tree will be blocked, and the JS file will be executed first.
2: When building the DOM tree, when encountering CSS elements, an asynchronous request thread will be opened. This thread will download the CSS file first, and then build the CSS rule tree. This thread will block the JavaScript engine thread, but will not block the construction of the DOM tree .
3: CSS parsing and JS parsing are mutually exclusive, which means that JS parsing will block CSS parsing and CSS parsing will also block JS parsing.
4: During JS parsing, if the JS also manipulates the CSS, and the CSS has not been downloaded or constructed, the execution of the JS will be delayed until the CSS download, construction, and parsing is completed, and then the JS will continue to be executed.
Vernacular explanation: The
browser will open two threads when rendering a webpage, the rendering engine thread and the JS engine thread , but these two threads are mutually exclusive, and only one thread can be executed at the same time. That is to say, when the DOM tree is constructed, the rendering engine is executing. When encountering JS, the rendering engine will stop execution and the control will be transferred to the JS engine. When the JS code is executed, if it encounters getting the DOM, then if the DOM has not been parsed, it will get null. If the JS code also manipulates the CSS, and if the CSS has not been downloaded and built, the browser will first block the execution of the JS engine, and then start an asynchronous request thread, on which to download and build the CSS rule tree, CSS rules After the tree is built, continue to execute the JS code. When the JS is executed, the control is again given to the rendering engine to execute. When encountering CSS elements, an asynchronous thread is also started to download and build the CSS rule tree, but at the same time, it will continue to build the subsequent DOM tree. That is to say, DOM parsing and CSS parsing can be performed at the same time, but if a JS element is encountered later, it will block the execution of the JS engine thread, and the subsequent DOM tree parsing will not be affected.
4. The introduction of CSS and JS
1: CSS resources should be placed in the head part as much as possible. Because CSS parsing and DOM parsing can be performed at the same time, putting CSS resources in the head will not affect DOM parsing, and putting them in the head will also start loading CSS styles first. You already know your styles when you render the DOM, so It can be rendered successfully once. If you put CSS at the bottom, then the DOM will be rendered first, and the browser will try to display the content on the screen as soon as possible for a better user experience, that is to say, the rendering engine will parse, render, and lay out the display. The white screen time has been reduced as soon as possible, so with the construction of the CSS rule tree, the previous rendering tree needs to be re-rendered, which may cause reflow and page jumps.
2: JS resources should be placed before the end tag of the body as much as possible. Putting JS before the end of the body tag can first ensure that the DOM object that needs to be manipulated can be obtained, and it can also shorten the white screen time caused by JS blocking and improve the user experience. Because if you put JS in the head part, JS running will block the DOM tree and CSS tree construction, resulting in prolonged white screen time, affecting user experience.
3: CSS resources should be introduced prior to JS resources as much as possible. Because JS is running, if you need to manipulate the CSS, but the CSS has not been downloaded and built, the JS thread will be blocked first, and then a new thread will be opened to download, parse and build the CSS rule tree, and then execute the JS code.
5. Description of browser engine
The browser kernel used to be divided into two parts: the rendering engine and the JS engine. However, as the JS engine is becoming more and more independent, the so-called browser kernel now refers to the rendering engine used by the browser.
Rendering engine: Responsible for the interpretation of web page grammar (such as an application HTML, JavaScript under the standard universal markup language) and rendering (displaying) the web page.
Common rendering engines include Chrome and Safar using Webkit, Firefox using Gecko, and IE using Trident. (Currently Chrome has begun to use Blink, IE uses Edge).
JS engine: Single-threaded engine, responsible for executing JS code.
Common JS engines include Chrome using V8 engine, Safari using Nitro, Firefox using SpiderMonkey, and Microsoft using JScript engine.
6. Reflow (reflow rearrangement) and repaint (repaint)
Reflow: also known as rearrangement. When part or all of the element structure of the rendering tree changes (add, delete, position change, show or hide), the browser needs to recalculate the DOM structure and re-render the current page. It's reflow. Each page needs to be reflowed at least once, when the page is first loaded.
Repainting: When the elements in the rendering tree only change their appearance style (background color, font color, border color) without affecting the surrounding and internal layout, then the browser will only repaint a certain part, which is repainting.
Note:
1: Reflow must trigger redraw, and redraw does not necessarily trigger redraw.
2: Reflow takes more time than redrawing, and it also affects performance more. So when writing code, try to avoid excessive reflow.
3: display:none will trigger reflow, because the element is hidden and the layout has changed, while visibility:hidden only hides the element, but still occupies the layout control, so only redrawing will occur.
7. How to reduce reflow and redraw
1 : Set absolute positioning or fixed positioning for elements that need to be reflowed multiple times to break away from the document flow and form a new layer to limit the scope of reflow and redraw (such as a carousel).
2 : Avoid modifying the styles one by one. It is best to define the style as a class and change it all at once.
3 : Avoid looping the DOM. Create a documentFragment or div, apply all DOM operations on it, and finally add it to window.document.
4 : When performing complex operations on an element, you can hide it first and display it after the processing is completed. The so-called hiding here is to make the element not exist in the render tree (display:none first hide the element, and then perform all operations on the element, Finally, display the element. Because the operation of the display:none element will not cause reflow or redraw. So as long as the operation is performed, there will only be 2 reflows).
5 : Use transform for deformation and displacement.
6 : Do not use the table layout, because every small change to the table will cause the entire table to be re-layout.
8. Performance optimization suggestions
1: Reduce the number of HTTP requests (such as CSS wizards).
2: The style file is placed in the head, and the script file is placed before the end of the body tag, which can reduce the white screen time and improve the user experience.
3: Avoid modifying the styles one by one. It is best to define the style as a class and change it all at once.
4: Resource merger and compression (as much as possible to merge external scripts, image compression).
5: Set absolute positioning or fixed positioning for elements that need to be reflowed multiple times to break away from the document flow and form a new layer to limit the scope of reflow and redraw (such as a carousel).
6: When performing complex operations on an element, you can hide it first, and then display it after the processing is completed. The so-called hiding here means that the element does not exist in the render tree.
7: Avoid cyclic manipulation of the DOM. Create a documentFragment or div, apply all DOM operations on it, and finally add it to window.document.
8: Specify the size for the picture to reduce reflow.
9: Use less global variables and try to use local variables.
10: Try to use transform for deformation and displacement to reduce backflow.
11: Lazy loading of pictures.
12: Throttling and anti-shake on the page.
13: Minimize DOM operations in JS.
14: Simplify and optimize the CSS selector, try to reduce the nesting level to the minimum.
15: Type conversion: Use number + "" to convert a number into a string, which is the most efficient.
Original: https://blog.csdn.net/Liu_yunzhao/article/details/91550704