The entire rendering process is actually to output a visual image through the analysis of the browser rendering engine to the various resources corresponding to the URL.
Rendering module:
As can be seen from the figure, a rendering engine roughly includes an HTML interpreter, a CSS interpreter, a layout, and a JavaScript engine.
HTML interpreter: An interpreter that interprets the HTML language, essentially interpreting HTML text into a DOM tree (Document Object Model).
CSS interpreter: An interpreter that interprets the style sheet. Its role is to add style information to each element object in the DOM, so as to provide a basis for the layout of the final result.
Layout: Combine the DOM and CSS style information, calculate their size and position and other layout information to form an internal representation model that can represent all of this information, that is, the rendering tree.
JavaScript engine: JavaScript can modify the content of webpages, as well as the information of CSS. The JavaScript engine interprets the JavaScript code and applies the logic of the code and changes to the DOM and CSS to the layout, thereby changing the rendering result.
These modules rely on many other basic modules, including network, storage, 2D/3D graphics, audio video and picture decoders. In fact, the rendering engine should also include the part of how to use these dependent modules. This part of the work is actually not a lot, because they need to be used to render web pages efficiently. For example, using a 2D/3D graphics library to achieve high-performance web page rendering and web page 3D rendering is very, very complicated. Finally, of course, at the bottom, the support of the operating system is still indispensable, such as thread support, file support, and so on.
Basic process
1. Parse HTML files and create DOM tree
2. Analyze CSS and form a CSS object model
3. Combine CSS and DOM to build a rendering tree (renderingtree)
4. Layout and drawing
For each element on the rendering tree, calculate its coordinates, which is called layout. The browser adopts a flow method, which only needs to pass once to layout an element, but the table element needs to pass many times.
Finally, the elements on the rendering tree are finally displayed in the browser. This process is called "painting".
When the user interacts with the web page, or the script program changes to modify the web page, some of the operations mentioned above will be repeated because the internal structure of the web page has changed.
Repaint
Redrawing is to change the element style that does not affect the position of the element in the web page, such as background-color (background color), border-color (border color), visibility (visibility), the browser will redraw according to the new attributes of the element Once (this is redrawing, or restructuring the style), the element presents a new appearance. Redrawing does not bring about re-layout, so it does not necessarily accompany re-arrangement.
Reflow (reflow)
When the render object is created and added to the render tree, it does not contain position and size information. The process of calculating these values is called layout or rearrangement.
When the change affects the text content or structure, or the position of elements, rearrangement or re-layout occurs. These changes are usually triggered by the following events:
DOM operations (addition, deletion, modification of elements or change of the order of elements);
Content changes, including text changes in form fields;
Calculation or change of CSS properties;
Add or delete style sheets;
Change the attributes of the "class";
Operation of the browser window (zoom, scroll);
Pseudo-class activation (hover).
"Redrawing" does not necessarily require "rearrangement". For example, changing the color of a webpage element will only trigger "redrawing" and not "rearrangement" because the layout has not changed.
However, "rearrangement" will inevitably lead to "redraw". For example, changing the position of a web page element will trigger both "rearrangement" and "redraw" because the layout changes.
How does the browser optimize rendering?
(1) Combine multiple operations that change style attributes into one operation
(2) Set the position attribute of the element that needs to be rearranged multiple times to absolute or fixed,
In this way, this element is out of the document flow, and its changes will not affect other elements. For example, elements with animation effects are best set to absolute positioning.
(3) Since the element whose display attribute is none is not in the render tree, operations on the hidden element will not cause the rearrangement of other elements.
If you want to perform complex operations on an element, you can hide it first, and then display it after the operation is complete. This only triggers 2 rearrangements when hidden and displayed.
When I looked at this, I thought of the difference between display: none, visibility: hidden and overflow: hidden, by the way.
Both display: none and visibility: hidden are functions to hide an element on a web page
display:none:
Hidden elements do not occupy any space in the webpage, and make this element disappear completely (invisible and intangible), because it will affect the space of the webpage, so it will cause a rearrangement and redraw.
visibility:hidden:
He hides that layer, that is, you can't see its content but the space occupied by its content still exists. (Invisible but tangible), this operation will not affect the page, so it will only cause a redraw.
overflow:hidden:
To hide the extra elements (do not occupy the space of the webpage), that is, when setting this attribute, it will cut off the extra part according to the width and height you set, which will cause a rearrangement and redraw.